#### SMACSS是一種css的設計模式 ###### SMACSS定義了五種樣式類型： 1. Base (基本) 2. Layout（布局） 3. Module (模塊) 4. State (狀態) 5. Theme (皮膚) #### Base(基本) 在項目中我們一般使用reset.css，用來重置元素的基本樣式(顏色、排版、外距和內距等)。 #### Layout(布局) 在我們的方法中不是基本樣式和全局的類名而是模塊。 SAMCSS規劃了主要布局組件(如，頁頭header，側欄sidebar，網格grid等等)和其他的一切。我們發現這種區別有幾個不必要的因素： 模塊通常用展示他們的子組件，同樣的方式主要的組件展示在頁面上。 即使我們100%確定組件將永過不會被重用，因此和可重用的組件相比沒有任何好處。 布局和模塊之間的界線太模糊了，布局做為一種特殊的類別保留下來是很價值的。 #### Module(模塊) 模塊是獨立的，可重用的組件，哪怕是不知道它們的父容器。他們唯一的依賴關系是應用基本樣式。當它不在需要時，我們可以安全的刪除模塊，而不什么影響我們的CSS。 BEM雙下劃線語法用于一個模塊的子組件范圍中，我們使用CSS子選擇器隨意適合深度的適用性。 BEM雙連字符語法作為修飾符來表示子類，或和關鍵字is-、模塊的具體狀態相結合。 因為設置模塊的寬度width，定位position，外距margin都需要上下文出現的相關因素，我們的模塊要么是全屏的塊元素要么是內聯元素。 這里有一個示例（modules/_my_module.scss）： ```css .my-module { background-color: maroon; position: relative; > a { color: aqua; } } .my-module--important { @extend .my-module; border: 3px solid fuchsia; } .my-module--is-active { background-color:red; } .my-module__close-button { position: absolute; right: 0; top: 0; } ``` 除了position和尺寸相關屬性外，大多數子組件可以提取出自己獨立的模塊。所以如果你離開定位到父元素，我們可以設置為三個小的、獨立的模塊。 modules/_my_module.scss: ```css .my-module { //... } .my-module__child-component { width: 100px; } ``` modules/_child_component.scss: ```css .child-component { //... } .child-component__grandchild-component { position: absolute; top: 10px; } ``` modules/_grandchild-component.scss: ```css .grandchild-component { //... } .grandchild-component--modifier { //... } ``` example.html: ```html <div class="my-module"> <div class="my-module__child-component"> <div class="child-component"> <div class="child-component__grandchild-component"> <div class="grandchild-component--modifier"> </div> </div> </div> </div> </div> ``` .grandchild-component和.child-component獨立于他們的父容器。這個模塊是用于他的子容器定位。這樣做好處是嵌套的UI組件彼此完全脫離。 #### State(狀態) 模塊的具體狀態作為模塊的本身被定義在相同的文件中(如上面的.my-module--is-active)，但我們要保持全局狀態類的分離，如.is-hidden。 #### Theme(皮膚) 我們通過在一個配置文件中設置變量的設置來實現站點的特定風格。