BEM 命名法

参考文章
参考文章
推荐文章

• BEM是指：块（block）、元素（element）、修饰符（modifier）的简写

• 规则:
  1 - : 仅作为链接字符串使用,用来表示某个快或者元素的多个单词之间的链接符号,没有什么特殊的含义
  2 __(双下划线): 用来表示块与其子元素的上下级的层级关系
  3 --(双中线): 用来链接块元素与修饰符,起到解释说明的作用

示例:

多块之间应用:

<style>
    .block_item1{}
    .block_item2{}
</style>

<div class="project-list">
    ....
</div>
<div class="project-list">
    ....
</div>

一个块中的命名:
注意: 如果你的组件有几个层次的子元素，不要尝试在类名中表示每一层。边界元法不用于表示结构深度。表示组件中的子元素的BEM类名应该只包括基本/块名和一个元素名。

<div class='block'>
    <div class='block__elem1'>
       <div class='block__elem2'>
            <div class='block__elem3'></div>
        </div>
    </div>
</div>

组件下的组件:
可以考虑将修饰符添加到组件的基元素中， 并根据该修饰符调整每个子元素的样式。 这将增加特异性，但它使修改组件变得更加简单。

<div class="block block--xmas">
    <button class="block__btn"></button>
</div>

.block--xmas .block__button {
        /* Jingle bells, jingle bells, jingle all the way.*/
}

案例:

<div class="box">
    <div class="box__header">
        <h2 class="box__title">标题</h2>
    </div>
    <div class="box__body">
        <div class="box__content">
            内容
        </div>
        <button class="button button--state-danger">
            Danger button
        </button>
    </div>
</div>