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