css名方法-命名的模塊化

基本思路是確保全局空間下一級域名不衝突，那麼子域名就被限定在了獨立的局部做用域中，從而保證命名的惟一性。

BEM

Block-Element-Modifier

SUIT CSS

一、將命名對象劃分爲組件（component）和功能（Utility）。組件直接命名，功能額外加前綴，好比專門給js調用的類名可加上js前綴：js-button
二、規定了連字符的用法。普通隔斷用單個連字符，描述性詞彙用兩個連字符：

.nav-button { }

.nav-button--primary { }

三、狀態切換用is-state型的相鄰類名（adjoining class）

.button { }

.button.is-disables { }

<button class=」button is-disables」></button>

OOCSS

抽象公共類，把複用度高的樣式抽取出來。
過提升複用性，減小命名的須要，由於有的樣式直接用公共類名就能實現，不須要額外命名。

.mt20 { margin-top: 20px }
.tc { text-align: center }
.abs { position: absolute }
.clearfix:after { content: ‘’; display: block; clear: both; height: 0 }

缺點是濫用就可能付出代價，好比有10個組件用同一個普通類名，那麼修改樣式只須要改一處CSS便可，可是在10個組件上用同一個公共類名好比mt20，意味着把mt20改爲mt15，你須要改10處的class。

SMACSS

針對數量龐大的類名

1. Base：基礎的樣式規則
2. Layout：用於佈局的樣式規則
3. Module：可複用的模塊樣式規則
4. State：狀態樣式
5. Theme：UI樣式

針對不一樣分類，可使用不一樣的前綴來劃分命名空間

ITCSS

更像是 CSS 總體架構方案，與 SMACSS 橫向分類不一樣，它綜合了以上各類方法，提出了一個縱向分層模型。(bootstrap使用)

1. Settings：簡單的說就是在SCSS中預設好變量
2. Tools：簡單的說就是在SCSS中預設好mixins和functions
3. Generic：簡單的說就是reset.css或normalize.css
4. Elements：對元素的基本格式化，如h1 { font-size: 20px }
5. Objects：使用OOCSS抽象公共類
6. Components：UI組件的樣式
7. Trumps：輔助性、功能性的特殊樣式，例如動畫