CSS的BEM命名规范

BEM的意思就是块（block）、元素（element）、修饰符（modifier），是由Yandex团队提出的一种CSS命名方法。

其背后的想法是将用户界面分为独立的块。即使使用复杂的UI，这也使界面开发变得容易和快速，并且允许重用现有代码而无需复制和粘贴。

• 避免样式冲突
• 减小名称长度
• 提高可阅读性
• 增加样式重用

规范默认有以下的几个约定，实际使用可自行统一，重在思想：

• - 中划线：仅作为连字符使用
• -- 双中划线：表示不同状态或不同版本
• __ 双下划线：双下划线用来连接块和块的子元素

Block

一个功能独立的页面组件，可以重复使用

块不应影响其环境，这意味着不应设置块的外部几何形状（边距）或位置

<!--good-->
< div  class = "header" > </ div >

<!--bad，red-text 是描述外观-->
< div  class = "red-text" > </ div >

Element

块的复合部分，不能单独使用

元素全名的结构为block-name__element-name

 一个元素始终是块的一部分，因此元素名称不可定义为 block__elem1__elem2 的层次结构

<!--遵循 block-name__element-name-->

<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__input">
        <button class="search-form__button">Search</button>
    </div>
</form>

<!--search-form__content__button 不遵循 block-name__element-name-->

<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__content__input">
        <button class="search-form__content__button">Search</button>
    </div>
</form>

Modifier

定义块或元素的外观，状态或行为的实体

修饰符的两种类型

命名空间

.l-: 布局(layouts) 

.o-: 对象(objects) 

.c-: 组件(components)

.js: js的钩子(JavaScript hooks)

.is-|.has-: 状态类(state classes) 

.t1|.s1: 排版大小(typography sizes) 

.u-: 实用类(utility classes)

使用 BEM 的诀窍是，你要知道什么时候哪些东西是应该写成 BEM 格式的。并不是每个地方都应该使用 BEM 命名方式。当需要明确关联性的模块关系时，应当使用 BEM 格式。比如只是一条公共的单独的样式，就没有使用 BEM 格式的意义