前言
為什么不用ID標(biāo)識符
主要考慮到樣式重用性以及與頁面的耦合性。ID本來就是唯一的而且權(quán)值那么大，還不如寫在行內(nèi)樣式。
#button {
text-decoration: underline;
}
為什么不用大于三層嵌套選擇器
嵌套選擇器增加了代碼耦合，使重用變得不可能，過多的嵌套會導(dǎo)致顯示性能?下降。簡潔的選擇器不僅可以減少css文件大小，提高頁面的加載性能，讓瀏覽器解析時也會更加高效。同時也會提高開發(fā)人員的開發(fā)效率，降低了維護(hù)成本。子代選擇器不好的地方還在于，如果層次關(guān)系過長，邏輯不清晰，非常不利于維護(hù)。
css的匹配原理不是從左到右的，而是從右到左的，從右邊開始匹配是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。
.button_hovered .button__text {
text-decoration: underline;
}
為什么不用組合選擇器
組合選擇器的耦合性更強(qiáng)，而且可維護(hù)性更加差。
.button.button_theme_islands {
text-decoration: underline;
}
介紹
BEM是Block，Element，Modifier的縮寫。下面分別來介紹一下這三個概念：
- 塊（Block）是一個塊級元素，可以理解為組件塊，比如頭部是個block，內(nèi)容也是block，一個block可能由幾個子block組成。
- 元素（Element）element是block的一部分完成某種功能，element依賴于block，比如在logo中，img是logo的一個element，在菜單中，菜單項(xiàng)是菜單的一個element。
- 修飾符（Modifier）modifier是用來修飾block或者element的，它表示block或者element在外觀或行為上的改變，例如actived。
這里引用BEM的定義一文中的兩張圖：
我們通過BEM命名法寫樣式如下：
- .block{}
- .block__element{}
- .block--modifier{}
- .block__element--modifier{}
BEM解決了的問題，
- 頁面CSS模塊化，每個block就是一個模塊，模塊間相互獨(dú)立，不會造成污染
- 多級的class命名，避免選擇器的嵌套結(jié)構(gòu)
- 減少通配符*或者類似[hidden="true"]這類選擇器的使用
- 巧妙運(yùn)用scss的特性，保證了樣式的可維護(hù)性
BEM將頁面解析為block和element，然后根據(jù)不同的狀態(tài)使用modifier來設(shè)置樣式，在scss的屬性幫助下，其實(shí)，寫B(tài)EM并不麻煩。
使用scss寫B(tài)EM
靈活的&
當(dāng)嵌套使用&時，它會直接抓取父選擇器的類名，自動拼接上元素名字，避免CSS文件中組件樣式的沖突。這樣，我們可以得到一個完整的BEM結(jié)構(gòu)的類名，這樣有效利用scss的嵌套特性避免CSS文件中組件樣式的沖突。
示例：
.header {
&__text {
text-decoration: underline;
}
&__image {
background-color: steelblue;
}
}
強(qiáng)大的@extend
@extend是scss的繼承語法，它可以將父級的屬性繼承到子級。主要使用在modifier上，因?yàn)楦淖儬顟B(tài)的屬性和原來的基本保持一致。你可以弄少一個classname。
示例：
<nav class="nav">
<ul class="nav__container">
<li class="nav__item"></li>
<li class="nav__item"></li>
<li class="nav__item"></li>
<li class="nav__item--active"></li>
</ul>
</nav>
.nav {
background-color: steelblue;
&__container {
display: flex;
justify-content: space-between;
}
&__item {
color: white;
&--active {
@extend .nav__item;
border-bottom: 1px solid red;
}
}
}
