问答：如何规划CSS 中 的命名方式 如何看待 CSS 中 BEM 的命名方式？

SCSS让CSS变的更像编程语言。于是，很自然的改变了CSS的传统组织方式。 

关于BEM争议最大的就是它的命名风格，这样： 
<ul class="block-name"> 
<li class="block-name--element-name">…</li> 
<li class="block-name--element-name">…</li> 
</ul> 

block + element + modifier，鼓励一级一级的写的非常具体，很长。 

问题： 
1. 这么长，影响书写效率吧。肯定会影响但这是个很大的问题吗（自动提示会缓解一些） 
2. html和css的size肯定会大一些。size大的顾虑是影响传输，在gzip面前可以忽略 
3. 不爽。的确很违背习惯，但任何个人喜好和习惯作借囗都不职业 

风格不重要。我更关心它的好处： 
1. SCSS嵌套过多。超过3层就很难阅读了。 
2. 嵌套多，选择器的层级就会多，性能不知不觉变差 
3. 复用。这么长的名，想冲突都难 

还有一个代码设计上的原则，不暴露抽象类。举例： 

以前： 
<ul class="list list-member"> 
<li>xxx</li> 
</ul> 

.list是抽象的列表类。层叠的.list-member类，定义少量样类就可以实现一个成员列表的样式。 

但是在其它编程语言里抽象类是不会被暴露出来的。借鉴BEM会是这样： 
<ul class="member-list"> 
<li class="member-list__item">xxx</li> 
</ul> 

不在html里层叠抽象类，而是在SCSS里继承： 
%list { ... } 

.member-list { 
@extend %list; 
} 
.member-list__item { 
// 不同的样式规则 
} 

这样更符合编程的特点。重要的是在维护上。假如变样了需要继承另一个抽象类，不需要改html，只要改css。这样SoC更彻底。 

风格无非是某种形式，可以约束人做到一致。背后的设计思想才值得应用。如果用BEM的风格，但没做到抽象类的封装，没做到选择器的扁平，那就是失败的应用。 

最后，我非常认同这种设计思想。但我还是不会照搬它的命名规则。太TM囧了！

最后我吐槽一句：我的这篇博文 排版 真tmd恶心啊！