BEM 写法示例

<!-- block, block__item, block--modifier, block__item--modifier -->
<ul class="menu">
  <li class="menu__item menu__item--selected">Menu Item 1</li>
  <li class="menu__item">Menu Item 2</li>
  <li class="menu__item">Menu Item 3</li>
</ul>


<!-- 避免 .block__el1__el2。改成用以下的方式。 -->
<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'>
            <div class='block__elem3'></div>
        </div>
    </div>
</div>

<!-- 避免用 block-name–-modifier-name__element-name 的写法。改成用以下的方式。 -->
<div class="block block--xmas">
  <button class="block__btn"></button>
</div>