class命名規範

韦小宝原創: 2017-11-29 09:22:116235瀏覽

對如新手來說寫html時給html標籤加樣式命名都很頭疼，不知道該給標籤起啥名，或者就隨便起名，這在日常的開發中很不方便，今天就來跟大家總結一下html裡的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命名規範

相關文章