轉(zhuǎn)載自(http://web.jobbole.com/83967/)

常見class關(guān)鍵詞：

• 布局類：header, footer, container, main, content, aside, page, section
• 包裹類：wrap, inner
• 區(qū)塊類：region, block, box
• 結(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ān)鍵詞之后淆攻，我們先來制定一些簡(jiǎn)單的規(guī)則

制定簡(jiǎn)單規(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-center
section.section-feature>.inner-center // if
section.section-main>.inner-center
section.section-postscript>.inner-center // if
footer.footer>.inner-center
header.header>.inner-center
section.section-feature>.inner-center // if
section.section-main>.inner-center
section.section-postscript>.inner-center // if
footer.footer>.inner-center

具體可參考HTML整站結(jié)構(gòu)設(shè)計(jì)，這里我們可以看出都是些簡(jiǎn)單的關(guān)鍵詞贾漏，比較好理解候学，一看就知道是什么。

現(xiàn)在問題來了纵散，如果其他地方也要用到這些關(guān)鍵詞怎么辦梳码？

修飾關(guān)鍵詞

以header為例，我們可以添加前綴表示不同的header伍掀，如區(qū)塊頭部.block-hd(hd為header簡(jiǎn)寫)掰茶，modal頭部.modal-hd，文章頭部.article-hd蜜笤。

同樣標(biāo)題也可以分為濒蒋，頁面標(biāo)題.page-tt(title的簡(jiǎn)寫)，區(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>
<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

// 繼承式
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ì)頁右邊欄為例诀紊，如下圖：

騰訊課堂課程詳細(xì)頁

三個(gè)區(qū)塊的基礎(chǔ)框架為：

.aside-block.block--xxx>
    h3.block-tt
    .block-bd
.aside-block.block--xxx>
    h3.block-tt
    .block-bd

其中.aside-block.block--xxx用到了我們的特殊化class，而.block-tt,block-bd則使用了我們的修飾關(guān)鍵詞隅俘，至于.aside-block與它的子元素之間則使用了我們上面說的繼承式層級(jí)×诘欤現(xiàn)在根據(jù)這個(gè)層級(jí)結(jié)構(gòu)我們定義基礎(chǔ)樣式如下：

.aside-block{
    .block-tt{}
    .block-bd{}
}
.aside-block{
    .block-tt{}
    .block-bd{}
}

假設(shè)這里的聯(lián)系機(jī)構(gòu)區(qū)塊的標(biāo)題不一樣，我們則可以：

.block--contact{
    .block-tt{}
}
.block--contact{
    .block-tt{}
}

當(dāng)然如果本身有5個(gè)區(qū)塊为居，2個(gè)標(biāo)題一樣碌宴，另外三個(gè)標(biāo)題又一樣，也許我們就有需要給.block-tt追加一個(gè)特殊化class蒙畴，或者給aside-block特殊化一個(gè)class贰镣，如：

.aside-block{
    .block-tt{
        &.block-tt--special{}
    }
    .block-bd{}
}
// 或
.aside-block{
    &..aside-block--special{
      .block-tt{}
  }
.aside-block{
    .block-tt{
        &.block-tt--special{}
    }
    .block-bd{}
}
// 或
.aside-block{
    &..aside-block--special{
      .block-tt{}
  }
}

基礎(chǔ)框架討論完畢之后，就輪到我們的內(nèi)容了忍抽，以聯(lián)系機(jī)構(gòu)為例：

使用ul>li結(jié)構(gòu)八孝，所以樣式是另外一個(gè)獨(dú)立的范圍，不嵌套在之前的.aside-block里面鸠项，html及css代碼如下：

ul.contact-list
    li
        i.item-icon.icon-font.i-xxx
        a.item-tt
        p.gray

ul.contact-list
    li
        i.item-icon.icon-font.i-xxx
        a.item-tt
        p.gray

這里我們li沒有設(shè)置class干跛，而p使用了一個(gè)全局的class.gray

.gray{}
.contact-list{
    li{}
    .item-icon{}
    .item-tt
}

.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{}
    }
}

.block--contact{
    .contact-list{
        li{}
    }
}

至此，我們的class命名方法討論完畢嘉熊，說到底就是先記住一些必備的基礎(chǔ)關(guān)鍵詞遥赚，然后合理應(yīng)用上剛才提出的修飾關(guān)鍵詞，特殊化class阐肤，層級(jí)及最后的樣式范圍就可以了凫佛。