CSS命名——BEM

前言

详情见参考，下面的只是部分摘要

BEM是什么

BEM是一种CSS命名规范。
BEM代表 “块（block）,元素（element）,修饰符（modifier）”。
在选择器中，由以下三种符号来表示扩展的关系：

-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线：双下划线用来连接块和块的子元素
_   单下划线：单下划线用来描述一个块或者块的子元素的一种状态 

type-block__element_modifier

Block

块是设计或布局的一部分，它有具体且唯一地意义 ，要么是语义上的要么是视觉上的。

一个块的正式（实际上是半正式的）定义有下面三个基本原则：

• CSS中只能使用类名（不能是ID）。
• 每一个块名应该有一个命名空间（前缀）
• 每一条CSS规则必须属于一个块。

Element

块中的子元素是块的子元素，
并且子元素的子元素在 bem 里也被认为是块的直接子元素。
一个块中元素的类名必须用父级块的名称作为前缀。

.list{}
.list .item{}

.list{}
.list__item{}

Modifier

一个“修饰符”可以理解为一个块的特定状态，标识着它持有一个特定的属性。

.list{}
.list.select{}
.list .item{}
.list .item.active{}
  
.list{}
.list_select{}
.list__item{}
.list__item_active{}

误区

使用BEM的常见误区

• 孙子选择器

<div class="card">
        <div class="card__header">
            
            <h2 class="card__header__title">Title text here</h2>
        
        </div>
        <div class="card__body">
            
            <img class="card__body__img" src="some-img.png">
            
            <p class="card__body__text">Lorem ipsum dolor sit amet, consectetur</p>
            <p class="card__body__text">Adipiscing elit.
                <a href="/somelink.html" class="card__body__text__link">Pellentesque amet</a>
            </p>
    
        </div>
</div>

这种嵌套很容易造成类目越来越累赘，基于之前子元素的子元素在 bem 里也被认为是块的直接子元素的原则。
应该这样

<div class="card">
        <div class="card__header">
            
            <h2 class="card__title">Title text here</h2>
        
        </div>
        <div class="card__body">
            
            <img class="card__img" src="some-img.png">
            
            <p class="card__text">Lorem ipsum dolor sit amet, consectetur</p>
            <p class="card__text">Adipiscing elit.
                <a href="/somelink.html" class="card__link">Pellentesque amet</a>
            </p>
    
        </div>
</div>

• 跨组件间的样式问题
• 是用修饰符还是新组件
• 对于wrappers / containers应该怎么处理
• 关于状态

优点

组件之间的完全解耦，不会造成命名空间的污染，如：.mod-xxx ul li 的写法带来的潜在的嵌套风险。

参考

1.CSS BEM 书写规范
2.BEM Methodology In CSS: A Quick Start Guide
BEM Visually Explained
3.Battling BEM – 5 common problems and how to avoid them