Last active
December 15, 2015 14:18
-
-
Save uberbuilder/5273082 to your computer and use it in GitHub Desktop.
BEM Code Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul class="goods"> | |
<li class="goods__item box"> | |
<h3 class="goods__title"> | |
Apple iPhone 4S 32Gb | |
</h3><img class="goods__image" src="..."><span class="goods__price"><a class="b-link goods__link" href="/">259</a></span> | |
</li> | |
<li class="goods__item box"> | |
<h3 class="goods__title"> | |
Samsung Galaxy Ace S5830 | |
</h3><img class="goods__image" src="..."><span class="goods__price"><a class="b-link goods__link" href="/">73</a></span> | |
</li> | |
<li class="goods__item box"> | |
<h3 class="goods__title"> | |
HTC One S | |
</h3><img class="goods__image" src="..."><span class="goods__price"><a class="b-link goods__link" href="/">152</a></span> | |
</li> | |
<li class="goods__item goods__item_new_yes box"> | |
<h3 class="goods__title"> | |
Sharp SH530U | |
</h3><img class="goods__image" src="..."><span class="goods__price"><a class="b-link goods__link" href="/">***</a></span> | |
</li> | |
<li class="goods__item box"> | |
<h3 class="goods__title"> | |
Samsung Galaxy S III 16Gb | |
</h3><img class="goods__image" src="..."><span class="goods__price"><a class="b-link goods__link" href="/">180</a></span> | |
</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
block goods { | |
tag: 'ul' | |
content: { | |
var content = []; | |
this.ctx.goods.forEach(function(item){ | |
var mods = {}; | |
if (item.new) mods.new = 'yes'; | |
content.push({ | |
elem: 'item', | |
mods: mods, | |
mix: [{ block: 'box' }], | |
content: [ | |
{ | |
elem: 'title', | |
content: item.title | |
}, | |
{ | |
elem: 'image', | |
url: item.image | |
}, | |
{ | |
elem: 'price', | |
content: { | |
block: 'b-link', | |
mix: [{ block: 'goods', elem: 'link' }], | |
url: item.url, | |
content: item.price | |
} | |
} | |
] | |
}); | |
content.push(' '); | |
}); | |
for(var i = 0; i < 10; i++) content.push({ elem: 'sizer' }); | |
return content; | |
} | |
elem item, tag: 'li' | |
elem sizer, tag: 'li' | |
elem title, tag: 'h3' | |
elem image { | |
tag: 'img' | |
attrs: { | |
src: this.ctx.url | |
} | |
} | |
elem price, tag: 'span' | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment