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

當(dāng)我們學(xué)習(xí)到css的內(nèi)在運(yùn)作時(shí)，我們知道是通過(guò)選擇器來(lái)選擇html的元素的。隨著css的不斷發(fā)展，我們用到的選擇器如今已是很多。我們沒(méi)添加一個(gè)樣式，就意味著css和html的聯(lián)系更多。

讓我們看看典型的一個(gè)css中塊的例子。

我們?nèi)绾尉o密結(jié)合我們的CSS,HTML呢?
#sidebar div {
    border: 1px solid #333;
}

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

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

我們看看以上代碼，大概就能知道這個(gè)頁(yè)面大致結(jié)構(gòu)。它有側(cè)邊欄，有超過(guò)1個(gè)章節(jié)的內(nèi)容，有無(wú)序列等等。如果這個(gè)網(wǎng)址長(zhǎng)時(shí)間沒(méi)有變化，這個(gè)樣式就是成功的。像我的博客網(wǎng)站就是這樣的。但是在一個(gè)大型網(wǎng)站里頭，這樣做，無(wú)疑阻礙了樣式復(fù)用，維護(hù)起來(lái)是個(gè)噩夢(mèng)。
那么我們錯(cuò)在哪里了呢？

1.我們的樣式太過(guò)依賴(lài)html的節(jié)點(diǎn)結(jié)構(gòu)。
2.樣式的使用選擇器深度太多了。

縮小深度

Html是樹(shù)形結(jié)構(gòu)的，它有父節(jié)點(diǎn)和子節(jié)點(diǎn)之分。各層各代向聯(lián)。比如body.article > #main > #content > #intro > p > b，它因?yàn)橛?代所以有6個(gè)應(yīng)用深度。.article #intro b這樣寫(xiě)同樣也會(huì)6個(gè)深度。
這種高度依賴(lài)Html結(jié)構(gòu)的情況給我們復(fù)用樣式帶來(lái)了極大的挑戰(zhàn)，比如回到剛剛側(cè)邊欄的例子里頭，如果要新建一個(gè)頁(yè)尾的樣式，我們是不是應(yīng)該對(duì)側(cè)邊欄的那些樣式復(fù)制一遍呢？

#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; 
} 

這里的根節(jié)點(diǎn)其實(shí)是div,所以我們這樣寫(xiě)：

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

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

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

這樣做，很顯然深度縮小了，即使它依然是依然Html結(jié)構(gòu)的。同時(shí)這樣做也有利于復(fù)用到其他地方。當(dāng)然，我們應(yīng)該盡可能的避免各個(gè)段落都在用class。
這樣做可以讓這個(gè)樣式模塊形成一種模板,至于內(nèi)容隨意變更。比如，雅虎中的Mustache模板。

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

很多時(shí)候，我們?cè)趯?xiě)代碼是要考慮維護(hù)成本，可讀性，代碼性能等等。還有一個(gè)我們要不要盡可能的給標(biāo)簽加上class。如果你不是非得讓元素變得靈活，加class是沒(méi)有必要的。
我們隊(duì)最后一個(gè)例子進(jìn)行深化研究。如果模塊中除了ul,還有ol,div之類(lèi)的呢?我們可以這樣寫(xiě)：

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

也可加class

class簡(jiǎn)化了樣式書(shū)寫(xiě)
.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> 

這個(gè)例子里加上class可以讓深度的縮小，同時(shí)單個(gè)選擇器也會(huì)避免潛在的'特殊樣式'的問(wèn)題（所謂特殊樣式是指，這個(gè)樣式專(zhuān)屬于模塊模塊或者布局）。
原文地址：https://smacss.com/