前言
详情见参考，下面的只是部分摘要
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
网友评论