當(dāng)我們學(xué)習(xí)到
css的內(nèi)在運(yùn)作時(shí)，我們知道是通過選擇器來選擇html的元素的慕匠。隨著css的不斷發(fā)展饱须，我們用到的選擇器如今已是很多。我們沒添加一個(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è)頁面大致結(jié)構(gòu)督怜。它有側(cè)邊欄，有超過1個(gè)章節(jié)的內(nèi)容狠角，有無序列等等号杠。如果這個(gè)網(wǎng)址長(zhǎng)時(shí)間沒有變化，這個(gè)樣式就是成功的。像我的博客網(wǎng)站就是這樣的姨蟋。但是在一個(gè)大型網(wǎng)站里頭屉凯，這樣做，無疑阻礙了樣式復(fù)用眼溶，維護(hù)起來是個(gè)噩夢(mèng)悠砚。
那么我們錯(cuò)在哪里了呢？
1.我們的樣式太過依賴
html的節(jié)點(diǎn)結(jié)構(gòu)堂飞。
2.樣式的使用選擇器深度太多了灌旧。
縮小深度
Html是樹形結(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這樣寫同樣也會(huì)6個(gè)深度衡蚂。
這種高度依賴Html結(jié)構(gòu)的情況給我們復(fù)用樣式帶來了極大的挑戰(zhàn)，比如回到剛剛側(cè)邊欄的例子里頭骏庸，如果要新建一個(gè)頁尾的樣式毛甲，我們是不是應(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,所以我們這樣寫：
.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è)趯懘a是要考慮維護(hù)成本裹粤，可讀性，代碼性能等等蜂林。還有一個(gè)我們要不要盡可能的給標(biāo)簽加上class遥诉。如果你不是非得讓元素變得靈活，加class是沒有必要的噪叙。
我們隊(duì)最后一個(gè)例子進(jìn)行深化研究矮锈。如果模塊中除了ul,還有ol,div之類的呢?我們可以這樣寫：
.pod > ul, .pod > ol, .pod > div {
margin-bottom: 5px;
}
也可加class
class簡(jiǎn)化了樣式書寫
.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ì)避免潛在的'特殊樣式'的問題（所謂特殊樣式是指睁蕾，這個(gè)樣式專屬于模塊模塊或者布局）苞笨。
原文地址：https://smacss.com/
