# 為什么要分層 * CSS有語義化的命名約定和CSS層的分離，將有助于它的可擴展性，性能的提高和代碼的組織管理。 * 大量的樣式，覆蓋、權重和很多!important，分好層可以讓團隊命名統一規范，方便維護。 * 有責任感地去命名你的選擇器。 <br> <br> # SMACSS [SMACSS（Scalable and Modular Architecture for CSS） ](https://smacss.com/)可擴展的模塊化架構的CSS)像OOCSS一樣以減少重復樣式為基礎。然而SMACSS使用一套五個層次來劃分CSS給項目帶來更結構化的方法： * Base -設定標簽元素的預設值 PS:html {} input[type=text] {} * Layout -整個網站的「大架構」的外觀 PS:#header { margin: 30px 0; } * Module -應用在不同頁面公共模塊 PS:.button{} * State -定義元素不同的狀態 PS:.nav--main { .active {} } * Theme - 畫面上所有「主視覺」的定義 PS: border-color、background-image 修飾符使用的是--，子模塊使用__符號。  <br> <br> # BEM [BEM](https://en.bem.info/) 和 SMACCS 非常類似，主要用來如何給項目命名。一個簡單命名更容易讓別人一起工作。比如選項卡導航是一個塊(Block)，這個塊里的元素的是其中標簽之一(Element)，而當前選項卡是一個修飾狀態(Modifier)： * block -代表了更高級別的抽象或組件 * block__element -代表.block的后代，用于形成一個完整的.block的整體。 * .block--modifier -代表.block的不同狀態或不同版本。 * 修飾符使用的是_，子模塊使用__符號。(不用一個-的原因是CSS單詞連接)   <br> <br> # SUIT [Suit](https://suitcss.github.io/)起源于BEM，但是它對組件名使用駝峰式和連字號把組件從他們的修飾和子孫后代中區分出來： 修飾符使用的是—，子模塊使用__符號。(不用一個-的原因是CSS單詞連接) ~~~ ProductDetails {} .ProductDetails-price {} .ProductDetails-title--sale {} ~~~ 如果你不想使用如此嚴格或者復雜的命名規則，給每一個選擇器加前綴同樣可以達到這樣的效果。 ~~~ .s-product-details {} .t-product-details {} .js-product-details {} ~~~ 結構屬性將會被應用到s-product-details選擇器中。主題屬性將應用于t-product-details選擇器。 <br> <br> # ACSS [ACSS](http://patternlab.io/)：考慮如何設計一個系統的接口。原子(Atoms)是創建一個區塊的最基本的特質，比如說表單按鈕。分子(Molecules)是很多個原子(Atoms)的組合，比如說一個表單中包括了一個標簽，輸入框和按鈕。生物(Organisms)是眾多分子(Molecules)的組合物，比如一個網站的頂部區域，他包括了網站的標題、導航等。而模板(Templates)又是眾多生物(Organisms)的結合體。比如一個網站頁面的布局。而最后的頁面就是特殊的模板。  ~~~ .m-10 { margin: 10px; } .w-50 { width: 50px; } ~~~ <br> <br> # ITCSS [ITCSS](http://csswizardry.net/talks/2014/11/itcss-dafed.pdf) * Settings?—?全局可用配置，設置開關。$color-ui: #BADA55; $spacing-unit:10px * Tools?—通用工具函數。@mixin font-color() {font-color: $color-ui;} * Generic?—?通用基礎樣式。Normalize, resets, box-sizing: border-box; * Base?—?未歸類的HTML元素。ul {list-style: square outside;} * Objects?—設計部分開始使用專用類。.ui-list__item {padding: $spacing-unit;} * Components?—?設計符合你們的組件。.products-list {@include font-brand();border-top: 1px solid $color-ui;} * Trumps?—重寫，只影響一塊的DOM。(通常帶上我們的!important)