- 為什么要分層？
- SMACSS
- BEM
- SUIT
- ACSS
原因
- CSS有語義化的命名約定和CSS層的分離，將有助于它的可擴(kuò)展性，性能的提高和代碼的組織管理
- 大量的樣式，覆蓋、權(quán)重和很多!important，分好層可以讓團(tuán)隊(duì)命名統(tǒng)一規(guī)范，方便維護(hù)
- 有責(zé)任感的去命名你的選擇器
SMACSS
SMACSS（Scalable and Modular Architecture for CSS 可擴(kuò)展的模塊化架構(gòu)的CSS）像OOCSS一樣以減少重復(fù)樣式為基礎(chǔ)。然而SMACSS使用一套五個(gè)層次來劃分CSS給項(xiàng)目帶來更結(jié)構(gòu)化的方法：
- Base 設(shè)定標(biāo)簽元素的預(yù)設(shè)值 PS：html{} input[type=text]{}
- Layout 整個(gè)網(wǎng)站的 ‘大架構(gòu)’ 的外觀 PS：#header{margin: 30px 0;}
- Module 應(yīng)用在不同頁面公共模塊 PS：.button{}
- State 定義元素不同的狀態(tài) PS：.nav-main{}
- Theme 畫面上所有 ‘主視覺’ 的定義 PS：border-color、background-image
BEM（不是說都要加下劃線，主要針對(duì)的是整體）
BEM和SMACSS非常類似，主要用來如何給項(xiàng)目命名。一個(gè)簡(jiǎn)單命名更容易讓別人一起工作。比如選項(xiàng)卡是一個(gè)塊（Block），這個(gè)塊里的元素是標(biāo)簽之一（Element），而當(dāng)前選項(xiàng)卡是一個(gè)修飾狀態(tài)（Modifier）：
- block 代表了更高級(jí)別的抽象或組件
- block__element 代表.block的后臺(tái)，用于形成一個(gè)完整的.block整體。
- .block--modifier 代表.block的不同狀態(tài)或不同版本。
- 修飾符使用的是，子模塊使用_符號(hào)。
BEM
SUIT
SUIT起源于BEM，但是它對(duì)組件名使用駝峰式和連字號(hào)把組件從他們的修飾和子孫后代中區(qū)分出來：
- 修飾符使用的是,子模塊使用_符號(hào)。
SUIT
如果你不想使用如此嚴(yán)格或者復(fù)雜的命名規(guī)則，給每一個(gè)選擇器前加前綴同樣可以達(dá)到這樣的效果。
.s-product-detauils{}
.t-product-detauils{}
.js-product-detauils{}
結(jié)構(gòu)屬性將會(huì)被應(yīng)用到s-product-details選擇器中。主題屬性將應(yīng)用于t-product-details選擇器。
ACSS
考慮如何設(shè)計(jì)一個(gè)系統(tǒng)的接口。原子（Atoms）是創(chuàng)建一個(gè)區(qū)塊的最基本的特質(zhì)，比如說表單按鈕。分子（Molecules）是很多個(gè)原子（Atoms）的組合，比如說一個(gè)表單中包含了一個(gè)標(biāo)簽，輸入框和按鈕。生物（Organisms）是眾多分子（Molecules）的組合物，比如一個(gè)網(wǎng)站的頂部區(qū)域，他包含了網(wǎng)站的標(biāo)題、導(dǎo)航等。而模板（Templates）又是眾多生物（Organisms）的結(jié)合體。比如一個(gè)網(wǎng)站頁面的布局。而最后的頁面就是特殊的模板。
ITCSS
- Settings 全局可用配置，設(shè)置開關(guān)。$color-ui:#BADA55;$spacing-unit:10px;
- Tools通用工具函數(shù)。@mixin font-color(){font-color:$color-ui;}
- Generic 通用基礎(chǔ)樣式。Normalize，reset，boxsizing:border-box;
- Base 未歸類的html元素。ul{list-style: square outside;}
- Objects設(shè)計(jì)部分開始使用專用類。.ul-list__item{padding:$spacing-unit};
- Components 設(shè)計(jì)符合你們的組件.products-list{@include font-brand();border-top:1px solid $color-ui;}
- Trumps 重寫，只影響一塊的DOM。（通常帶上我們的!important）（比如只有顏色不一樣）
最后我列出一些我將要用到的技巧，并且堅(jiān)持做下去：
- 盡量不讓自己的樣式層級(jí)超過三層
- 盡量不使用
!important，通過添加和使用類名，比如.hidden類名 - 盡量遠(yuǎn)離Sass中介紹
@extend的一般經(jīng)驗(yàn)法則——他們有些是迷惑人 - 盡量在樣式表中添加注釋
- 讓團(tuán)隊(duì)寫CSS有一個(gè)標(biāo)準(zhǔn)規(guī)范——Harry Roberts寫了一個(gè)很有名的CSS指南
- 此外，應(yīng)該有一個(gè)可以展示元素樣式的模塊庫
- 使用類似scss-lint工具，讓你的SCSS/CSS和規(guī)范保持一致
- 盡量不要使用
*這樣的全局選擇器 - JavaScript鉤子是使用的類名，盡量加上前綴
js- - 盡量在項(xiàng)目中重復(fù)使用類名和模塊
- 取名盡量和Bootstrap框架的組件接近
- 在樣式中避免使用
#id
擴(kuò)展閱讀：
www.leemunroe.com/css
https://www.w3cplus.com/css/css-sass-scss-compass-less-bem-smacss-oocss-acss-ccss-wtfss.html
eslint: http://www.itdecent.cn/p/2bcdce1dc8d4
