class命名規范

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

層級
最適合層級的例子莫過于ul>li結構了，如下面的結構：

<ul>
    <li>
        <a href="#"><img src="" alt=""></a>
        <h3><a href="#"></a></h3>
        <p></p>
    </li>
</ul>

一般來說我們也有兩種辦法定義層級，第一種為繼承式，第二種為關鍵詞式。

// 繼承式
ul.card-list
    li.list-item
        a.item-img-link>img.item-img
        h3.item-tt>a.item-tt-link
        p.item-text

// 關鍵詞式
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；至于關鍵詞式則完全由關鍵詞來表示層級，list>item>filed正好構成三層等級。
最后由我們的層級進入我們最后一個問題，如何控制樣式的范圍。

相關推薦：

class與id有什么區別

html中規定元素的類名的屬性class

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

以上就是class命名規范的詳細內容，更多請關注php中文網其它相關文章！