BEM Code Example

BEM_test1.html

<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>

source.bemhtml

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'
 
}