不要建复用的单样式的类
我们很多人会觉得在样式表中放一个这样的类，使用很方便。
.b {font-weight:bold}
<span class=”b”>一段文字</span>
但我觉得这违背了前端结构与表现分离的原则，因为这个类和直接写inline style没差
<span style=”font-weight:bold”>一段文字</span>
这就引入一个话题，我们应该如何规划class呢？什么样式才能被赋予一个class上呢？我的理解是：CSS类应该对应一个页面元素的所有表现（也有例外，比如有些元素上被赋予两个类，属于多种可剥离的可复用的样式模式，不在这里赘述了）。反映到这个实例上来，正确的写法应该是
.sth {font-weight:bold;other:otherstyle}
<span class=”sth”>一段文字</span>
实际给我们带来什么好处？那就是结构与表现分离给我们带来的好处。下次改版说这里不加粗了，那在前者中你得去改HTML把CLASS b去掉（强行改class b的属性也行，那我比较无语），而后者，你只需要修改样式表。
.sth {other:otherstyle}
有人可能会挑战这样一个推理过程：这是有代价的，给每个结构赋予一个不同的class，当然耦合小，改版最灵活了，但带来的是庞大的样式表，包含大量的class。我的解释是：这个问题确实存在，解决办法就是用你丰富的经验，合理抽取在本页，或者本站中可复用的样式，编写为对应的class。每个剥离出来的class不应该过细，细到对应单个视觉表现，类似于本文提到的加粗。而应该是对应一组视觉表现，这组视觉表现用于描绘一个完整的模块。
Recent Comments