布局類：header[?hed?(r)] 頭, footer[?f?t?(r)]頁腳, container[k?n?te?n?(r)] 容器, main[me?n]主要的, content['k?ntent]內(nèi)容, aside[??sa?d]在一邊, page[pe?d?] 頁, section[?sek?n]部分

包裹類：wrap[r?p] 包, inner[??n?(r)]內(nèi)部的

區(qū)塊類：region[?ri:d??n]區(qū)域, block[bl?k] 塊, box[b?ks] 箱

結(jié)構(gòu)類：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

狀態(tài)類：active, current, checked, hover, fail, success, warn, error, on, off

導(dǎo)航類：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

交互類：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,

星級(jí)類：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...

制定簡單規(guī)則：
以中劃線連接饺饭，如.item-img

使用兩個(gè)中劃線表示特殊化荣刑，如.item-img.item-img--small
表示在.item-img
的基礎(chǔ)上特殊化
狀態(tài)類直接使用單詞奔缠，參考上面的關(guān)鍵詞伪煤，如.active, .checked

圖標(biāo)以icon-
為前綴（字體圖標(biāo)采用.icon-font.i-name
方式命名）。
模塊采用關(guān)鍵詞命名，如.slide, .modal, .tips, .tabs
，特殊化采用上面兩個(gè)中劃線表示玖瘸，如.imgslide--full, .modal--pay, .tips--up, .tabs--simple

js操作的類統(tǒng)一加上js-
前綴
不要超過四個(gè)class組合使用，如.a.b.c.d

關(guān)鍵詞及規(guī)則都有了檀咙，現(xiàn)在可以進(jìn)入本文的核心的核心雅倒，實(shí)戰(zhàn)操作。
實(shí)戰(zhàn)操作
以布局入手弧可，大概結(jié)構(gòu)如下：
header.header>.inner-centersection.section-feature>.inner-center // ifsection.section-main>.inner-centersection.section-postscript>.inner-center // iffooter.footer>.inner-center
　　
具體可參考HTML整站結(jié)構(gòu)設(shè)計(jì)蔑匣，這里我們可以看出都是些簡單的關(guān)鍵詞，比較好理解棕诵，一看就知道是什么裁良。
現(xiàn)在問題來了，如果其他地方也要用到這些關(guān)鍵詞怎么辦校套？
修飾關(guān)鍵詞
以header為例趴久，我們可以添加前綴表示不同的header，如區(qū)塊頭部.block-hd
(hd為header簡寫)搔确，modal頭部.modal-hd
，文章頭部.article-hd
。
同樣標(biāo)題也可以分為膳算，頁面標(biāo)題.page-tt
(title的簡寫)座硕，區(qū)塊標(biāo)題.block-tt
等。
同樣涕蜂，這給我們提出了第二個(gè)問題华匾，如果要特殊化某個(gè)class該怎么辦？
特殊化class
以上面的tt為例机隙，大概有三種辦法：
第一種辦法：直接修改class蜘拉，將.page-tt
修改成.page-user-tt
(可以采用scss的%
先定義共用的代碼)。
第二種辦法： 追加class特殊化有鹿，根據(jù)我們上面定義的規(guī)則旭旭，在.page-tt
上追加一個(gè)class成為.page-tt.page-tt--user
，注意.page-tt--user
不是一個(gè)獨(dú)立的class葱跋，它使基于.page-tt
這個(gè)基礎(chǔ)上的持寄。
第三種辦法： 使用父類，給一個(gè)范圍娱俺，于是形成.page-user .page-tt
稍味。
一般我們使用的是第二種和第三種辦法，因?yàn)檫@兩種都有共同的.page-tt
荠卷，可以比較方便控制一些基礎(chǔ)共有的樣式模庐。
由第三個(gè)通過父類控制的辦法，我們進(jìn)入第三個(gè)要討論的問題油宜，層級(jí)結(jié)構(gòu)
層級(jí)
最適合層級(jí)的例子莫過于ul>li
結(jié)構(gòu)了掂碱，如下面的結(jié)構(gòu)：
<ul> <li> <a href="#"><img src="" alt=""></a> <h3><a href="#"></a></h3> <p></p> </li></ul>
　　
一般來說我們也有兩種辦法定義層級(jí)，第一種為繼承式验庙，第二種為關(guān)鍵詞式顶吮。
// 繼承式ul.card-list li.list-item a.item-img-link>img.item-img h3.item-tt>a.item-tt-link p.item-text// 關(guān)鍵詞式ul.card-list li.item a.field-img-link>img.field-img h3.field-tt>a.field-tt-link p.field-text
　　
由上可以看出繼承式一般子元素接著父元素的最后一個(gè)單詞如li接著ul的list
，而li的子元素接著li的item
粪薛；至于關(guān)鍵詞式則完全由關(guān)鍵詞來表示層級(jí)悴了，list>item>filed
正好構(gòu)成三層等級(jí)。
最后由我們的層級(jí)進(jìn)入我們最后一個(gè)問題违寿，如何控制樣式的范圍
樣式范圍
這里以騰訊課堂的課程詳細(xì)頁右邊欄為例湃交，如下圖：

.gray{}.contact-list{ li{} .item-icon{} .item-tt}
　　
同理如果我們有其他地方應(yīng)用這個(gè)可以拷貝過去熔掺，而如果需要一點(diǎn)調(diào)整，我們可以使用父元素來控制非剃，如這里我們可以使用.block--contact
來進(jìn)一步調(diào)整contact的樣式置逻，如：
.block--contact{ .contact-list{ li{} }}
　　
至此，我們的class命名方法討論完畢努潘，說到底就是先記住一些必備的基礎(chǔ)關(guān)鍵詞诽偷，然后合理應(yīng)用上剛才提出的修飾關(guān)鍵詞，特殊化class疯坤，層級(jí)及最后的樣式范圍就可以了报慕。