class命名規(guī)范

常見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
導航類：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...
有了關(guān)鍵詞之后，我們先來制定一些簡單的規(guī)則。
制定簡單規(guī)則：
以中劃線連接，如.item-img
使用兩個中劃線表示特殊化，如.item-img.item-img--small表示在.item-img的基礎(chǔ)上特殊化
狀態(tài)類直接使用單詞，參考上面的關(guān)鍵詞，如.active, .checked
圖標以icon-為前綴（字體圖標采用.icon-font.i-name方式命名）。
模塊采用關(guān)鍵詞命名，如.slide, .modal, .tips, .tabs，特殊化采用上面兩個中劃線表示，如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
js操作的類統(tǒng)一加上js-前綴
不要超過四個class組合使用，如.a.b.c.d
修飾關(guān)鍵詞：
以header為例，我們可以添加前綴表示不同的header，如區(qū)塊頭部.block-hd(hd為header簡寫)，modal頭部.modal-hd，文章頭部.article-hd。
同樣標題也可以分為，頁面標題.page-tt(title的簡寫)，區(qū)塊標題.block-tt等。
同樣，這給我們提出了第二個問題，如果要特殊化某個class該怎么辦？
特殊化class：
以上面的tt為例，大概有三種辦法：
第一種犯法：直接修改class，將.page-tt修改成.page-user-tt(可以采用scss的%先定義共用的代碼)。
第二種辦法： 追加class特殊化，根據(jù)我們上面定義的規(guī)則，在.page-tt上追加一個class成為.page-tt.page-tt--user，注意.page-tt--user不是一個獨立的class，它使基于.page-tt這個基礎(chǔ)上的。
第三種辦法： 使用父類，給一個范圍，于是形成.page-user .page-tt。
一般我們使用的是第二種和第三種辦法，因為這兩種都有共同的.page-tt，可以比較方便控制一些基礎(chǔ)共有的樣式。
由第三個通過父類控制的辦法，我們進入第三個要討論的問題，層級結(jié)構(gòu)

層級
最適合層級的例子莫過于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>

一般來說我們也有兩種辦法定義層級，第一種為繼承式，第二種為關(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

由上可以看出繼承式一般子元素接著父元素的最后一個單詞如li接著ul的list，而li的子元素接著li的item；至于關(guān)鍵詞式則完全由關(guān)鍵詞來表示層級，list>item>filed正好構(gòu)成三層等級。
最后由我們的層級進入我們最后一個問題，如何控制樣式的范圍。

相關(guān)推薦：

class與id有什么區(qū)別

html中規(guī)定元素的類名的屬性class

css如何使用id與class來控制元素樣式的實例分析

以上就是class命名規(guī)范的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！