可扩展、模块化CSS--应用性深度(翻译文)

SMACSS is becoming one of the most useful contributions to front-end discussions in years

当我们学习到css的内在运作时，我们知道是通过选择器来选择html的元素的。随着css的不断发展，我们用到的选择器如今已是很多。我们没添加一个样式，就意味着css和html的联系更多。

让我们看看典型的一个css中块的例子。

我们如何紧密结合我们的CSS,HTML呢?
#sidebar div {
    border: 1px solid #333;
}

#sidebar div h3 { 
    margin-top: 5px;
}

#sidebar div ul {
    margin-bottom: 5px; 
} 

我们看看以上代码，大概就能知道这个页面大致结构。它有侧边栏，有超过1个章节的内容，有无序列等等。如果这个网址长时间没有变化，这个样式就是成功的。像我的博客网站就是这样的。但是在一个大型网站里头，这样做，无疑阻碍了样式复用，维护起来是个噩梦。
那么我们错在哪里了呢？

1.我们的样式太过依赖html的节点结构。
2.样式的使用选择器深度太多了。

缩小深度

Html是树形结构的，它有父节点和子节点之分。各层各代向联。比如body.article > #main > #content > #intro > p > b，它因为有6代所以有6个应用深度。.article #intro b这样写同样也会6个深度。
这种高度依赖Html结构的情况给我们复用样式带来了极大的挑战，比如回到刚刚侧边栏的例子里头，如果要新建一个页尾的样式，我们是不是应该对侧边栏的那些样式复制一遍呢？

#sidebar div, #footer div {
    border: 1px solid #333;
}

#sidebar div h3, #footer div h3 { 
    margin-top: 5px;
}

#sidebar div ul, #footer div ul {
    margin-bottom: 5px; 
} 

这里的根节点其实是div,所以我们这样写：

.pod {
    border: 1px solid #333;
}

.pod > h3 { 
    margin-top: 5px;
}

.pod > ul {
    margin-bottom: 5px; 
} 

这样做，很显然深度缩小了，即使它依然是依然Html结构的。同时这样做也有利于复用到其他地方。当然，我们应该尽可能的避免各个段落都在用class。
这样做可以让这个样式模块形成一种模板,至于内容随意变更。比如，雅虎中的Mustache模板。

<div class="pod">
    <h3>{{heading}}</h3>
    <ul>
        {{#items}}
        <li>{{item}}</li>
        {{/items}}
    </ul>
</div> 

很多时候，我们在写代码是要考虑维护成本，可读性，代码性能等等。还有一个我们要不要尽可能的给标签加上class。如果你不是非得让元素变得灵活，加class是没有必要的。
我们队最后一个例子进行深化研究。如果模块中除了ul,还有ol,div之类的呢?我们可以这样写：

.pod > ul, .pod > ol, .pod > div {
    margin-bottom: 5px; 
} 

也可加class

class简化了样式书写
.pod-body {
    margin-bottom: 5px; 
} 

所以Html就是这样的：

An example Mustache template
<div class="pod">
    <h3>{{heading}}</h3>
    <ul class="pod-body">
        {{#items}}
        <li>{{item}}</li>
        {{/items}}
    </ul>
</div> 

这个例子里加上class可以让深度的缩小，同时单个选择器也会避免潜在的'特殊样式'的问题（所谓特殊样式是指，这个样式专属于模块模块或者布局）。
原文地址：https://smacss.com/