SMACSS is becoming one of the most useful contributions to front-end discussions in years
就像前面一章提到的那样，模块在页面当中是一个独立的整体。像导航栏，弹出框，轮播等等。模块可以在布局当中，也可以在另一个模块之中，也可以自己独立的存在。所以模块必须做到尽可能的灵活，这样它才能在不破坏原有样式结构下，无差异地运用到页面的各个地方。
我们去设置模块的时候，应该避免使用ID选择器和标签选择器，而只用类选择器。而它的子元素可以通过后代或者子选择器进行样式上的连接。
模块的例子
.module > h2 {
padding: 5px;
}
.module span {
padding: 5px;
}
避免使用标签选择器
如果模块的子元素的样式是可预测的，统一的，那么使用后代和子选择器。.module span就是很好的用法，如果模块下的子元素在任何地方样式都一样的话。
通用元素样式
<div class="fld">
<span>Folder Name</span>
</div>
/* The Folder Module */
.fld > span {
padding-left: 20px;
background: url(icon.png);
}
不过随着网站越来越复杂，问题也就来了。因为我们需要对模块进行扩展，所以用以上代码来修饰通用元素就会有诸多限制。
通用元素样式
<div class="fld">
<span>Folder Name</span>
<span>(32 items)</span>
</div>
现在就有问题了。我们不想图标出现在两个模块子元素里。于是乎，我们又引发了另一个问题：
让一个选择器区别于其他的时候，它也就变得语义化。 span和div没有语义化，但是像heading这样的就有语义化。在元素上加上类名无疑会变得好得多。
<div class="fld">
<span class="fld-name">Folder Name</span>
<span class="fld-items">(32 items)</span>
</div>
通过添加类名，来增加语义化，无疑削弱了它的歧义。
如果你要使用元素选择器，那么久必须在类选择器之下使用，换句话说，你要使用子选址器。为此，你的确定元素与元素之间不会相互影响。普通元素语义化越多，那么产生冲突的可能就越大。只有像```heading``语义化标签使用的越多，那么元素选择器就会使用的越成功。
原文地址：https://smacss.com/
网友评论