前言：
很多人在寫css時，class命名時，會想到我得起個獨特的名字，然后放心地寫自己的css，這個應該只有我自己在用，上線后，自我欣賞，完美 O(∩_∩)O哈哈~。一和別人集成，問題來了，茫茫人海，居然有人跟你三觀一致，樣式沖突啦，被覆蓋啦，呀，改的時候無限感慨，誰寫的，誰咋這樣寫呢？怎么改呀，我是換個class名字？還是再加個父元素？ 啊，太坑了~~ 急了 !important~~
由此可見，class命名就跟牙疼，雖不是病，疼起來也要命~~，更主要我們還要兼顧其可讀性以及復用性，同時避免沖突的可能。摸索吧~
命名歷程：
class命名歷程：
- 無章程，無規律可循，想怎么寫就怎么寫，哪里需要寫哪里，只管自我欣賞。
- 拼湊組合寫法，過復雜的樣式需要多個class組合，有時修改個樣式，需要修改html文件，相當不靈活。
- 模塊階段，前綴表示模塊，隨着模塊的增加，你的前綴再增加或者再加上二級前綴，最后綴的自己都記不清了，別人更看不懂了~
- BEM （Block+Element+Modifier）99.99%的幾率不會沖突，便於統一團隊開發規范和方便維護。主要缺點就是DOM嵌套的越深，你的class名字會比較長，寫css時，就拷貝class名字，你可能會覺得就一個p,搞這么長名字class~
- 世上沒有完美，卻有適用的。吸取之長，棄之短缺。 比如這樣：我們約定用‘_’連接子元素，‘__’ 長下划線意義‘ --’連接特殊性 .button_span__msg--success
常見class關鍵詞總結：
- 布局類：header, footer, container, main, content, aside, page, section
- 包裹類：wrap, inner
- 區塊類：region, block, box
- 結構類：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
- 列表類：list, item, field
- 主次類：primary, secondary, sub, minor
- 大小類：s, m, l, xl, large, small
- 狀態類：active, current, checked, hover, fail, success, warn, error, on, off
- 導航類：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
- 交互類：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
- 星級類：rate, star
- 分割類：group, seperate, divider
- 等分類：full, half, third, quarter
- 表格類：table, tr, td, cell, row
- 圖片類：img, thumbnail, original, album, gallery
- 語言類：cn, en
- 論壇類：forum, bbs, topic, post
- 方向類：up, down, left, right
- 其他語義類：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
基於這些關鍵詞，結合我們自定義的規則，形成體系.
舉個例子，可以這樣：.block_head__icon--contact
總結：
記住基礎關鍵詞，加上合理的修飾關鍵詞，再搞個特殊化，加上層級，樣式的范圍就大致定下來了。
沿着前人摸索的道路，我們很快找到適合自己的命名規范，整個團隊約定俗成，從而沖突得以避免，去吧，高枕無憂地寫你的css. ^_^