布局類: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ì)頁右邊欄為例湃交,如下圖:
三個(gè)區(qū)塊的基礎(chǔ)框架為:
.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{}}
假設(shè)這里的聯(lián)系機(jī)構(gòu)區(qū)塊的標(biāo)題不一樣,我們則可以:
.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{} }}
基礎(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
這里我們li沒有設(shè)置class锅移,而p使用了一個(gè)全局的class.gray
.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í)及最后的樣式范圍就可以了报慕。