CSS 中 BEM 的命名方式

拆分

• Block独立模块：中横线
• Element子元素：俩下划线
• Modifier模块状态：一个下划线
• Block下的所有Element不考虑层级嵌套关系，扁平化处理都属于Block，即连续的__下划线只能出现一次¹

实现

• 模块：.Block
• 模块_状态：.Block_Modifier
• 模块__子元素：.Block__Element
• 模块_子元素状态：.Block__Element_Modifier

语法：<b><__e>?<_m>?

命名

• 模块：名词；
• 修饰：大小/尺寸/颜色/形状/新旧/状态 之类的形容词；

绝不能用表象的具体词汇!

如主色是蓝色，不能.blue，可以.primary，指不定换成红色了，是吧，你懂。

好处

BEM，看着有点丑肥，日子久了，但真受用，你懂。

• 宽带提速降费和gzip可忽略文件体积
• 避免命名冲突
• 提升排版引擎渲染效率
• 代码可阅读性提高提升开发效率
• 大面积__感觉不爽/爽，那就快速code完关掉电脑回归生活，有益身心与和睦家庭

---

1. 建议参考项目 WeUI 源码↩

谢谢知乎 棱镜 指正。2018/1/19更新

---

这是我在知乎上的回答，贴过来备份，如何看待 CSS 中 BEM 的命名方式？