xiebiji.com

重构的时候有一种很简单的class命名思维，我们可能知道，可能不知道；但是知道后又很难应用上，是什么的思维呢？请看以下两段代码：

第一段：

<div class="a">
   <div class="b">
       <div class="c">
          ...
       </div> 
   </div>
</div>

对应的css写法：

.a{}
.a .b{}
.a .b .c{}

第二段：

<div class="a">
   <div class="a_b">
       <div class="a_b_c">
          ...
       </div> 
   </div>
</div>

对应的css写法：

.a{}
.a_b{}
.a_b_c{}

有什么区别呢？很明显第二种的HTML写法会冗余一点，但是CSS的写法就没那么复杂的选择结构了。在小型项目中，这两个基本上没什么区别的。但是在大型项目中就不一样了：

1、第一种写法适合局部排版

2、第二种写法适合全局公用模板

为什么呢？

第一种写法里面，由于名字复杂度低，很可能页面的其他位置存在与该结构内某个元素一样的命名（如该段代码有一个b类的div，整个页面却也有一个b的类名,在第二种写法里面极少可能出现这种情况）外层样式较易干扰内层样式(只要选择器复杂度一致即可干扰，如上结构外假如有一个.d,那么选择器”.d .b”会干扰”.a .b”)，当然第一种写法明显HTML就没有那么臃肿了。

第二种写法里面，对于每个css选择器优先级都是最低的，但是类名却是可以保证极高程度的唯一性。

• 好处是：公用样式高度独立，受外部样式的干扰较难；而且由于优先级低，可以灵活更改特定元素的样式而不需考虑优先级限制的问题。非常适合用作公用模板。
• 坏处是：html会变得异常冗余，假如用于公用模板，也就是说很多地方都会用到，对于大型项目来说，公用模板增加大小的话会导致多处地方代码量变大，带宽成本变高。

那最后可以总结一点，页面编写的时候两种方法都应该用上，公用模板用第二种写法，第一种方法适用于公用性较低的地方。

以上观点由小JOE总结，不一定准确，欢迎讨论。