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

布局類: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í)及最后的樣式范圍就可以了报慕。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市压怠,隨后出現(xiàn)的幾起案子眠冈,更是在濱河造成了極大的恐慌,老刑警劉巖菌瘫,帶你破解...
    沈念sama閱讀 212,542評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蜗顽,死亡現(xiàn)場離奇詭異,居然都是意外死亡雨让,警方通過查閱死者的電腦和手機(jī)雇盖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來栖忠,“玉大人崔挖,你說我怎么就攤上這事♀帜” “怎么了狸相?”我有些...
    開封第一講書人閱讀 158,021評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長捐川。 經(jīng)常有香客問我脓鹃,道長,這世上最難降的妖魔是什么古沥? 我笑而不...
    開封第一講書人閱讀 56,682評(píng)論 1 284
  • 正文 為了忘掉前任瘸右,我火速辦了婚禮娇跟,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘尊浓。我一直安慰自己逞频,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,792評(píng)論 6 386
  • 文/花漫 我一把揭開白布栋齿。 她就那樣靜靜地躺著,像睡著了一般襟诸。 火紅的嫁衣襯著肌膚如雪瓦堵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,985評(píng)論 1 291
  • 那天歌亲,我揣著相機(jī)與錄音菇用,去河邊找鬼。 笑死陷揪,一個(gè)胖子當(dāng)著我的面吹牛惋鸥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播悍缠,決...
    沈念sama閱讀 39,107評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼卦绣,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了飞蚓?” 一聲冷哼從身側(cè)響起滤港,我...
    開封第一講書人閱讀 37,845評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎趴拧,沒想到半個(gè)月后溅漾,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,299評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡著榴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,612評(píng)論 2 327
  • 正文 我和宋清朗相戀三年添履,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片脑又。...
    茶點(diǎn)故事閱讀 38,747評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡暮胧,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出挂谍,到底是詐尸還是另有隱情叔壤,我是刑警寧澤,帶...
    沈念sama閱讀 34,441評(píng)論 4 333
  • 正文 年R本政府宣布口叙,位于F島的核電站炼绘,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏妄田。R本人自食惡果不足惜俺亮,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,072評(píng)論 3 317
  • 文/蒙蒙 一驮捍、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧脚曾,春花似錦东且、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,828評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至拷沸,卻和暖如春色查,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背撞芍。 一陣腳步聲響...
    開封第一講書人閱讀 32,069評(píng)論 1 267
  • 我被黑心中介騙來泰國打工秧了, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人序无。 一個(gè)月前我還...
    沈念sama閱讀 46,545評(píng)論 2 362
  • 正文 我出身青樓验毡,卻偏偏與公主長得像,于是被迫代替她去往敵國和親帝嗡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子晶通,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,658評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容

  • 布局類:header, footer, container, main, content, aside, page...
    大道路漫漫閱讀 356評(píng)論 0 0
  • 轉(zhuǎn)載自(http://web.jobbole.com/83967/) 常見class關(guān)鍵詞: 布局類:header...
    居客俠閱讀 414評(píng)論 0 0
  • 常見class關(guān)鍵詞:布局類:header, footer, container, main, content, ...
    penggelies07閱讀 1,156評(píng)論 0 2
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法,類相關(guān)的語法丈探,內(nèi)部類的語法录择,繼承相關(guān)的語法,異常的語法碗降,線程的語...
    子非魚_t_閱讀 31,602評(píng)論 18 399
  • 在你還未開口之前 我就自己扒下 并非不喜歡漂亮 而是你的惡語讓人如梗在喉 所以我寧愿做個(gè)快樂的小狗 也比遇見你好受
    得一生二閱讀 407評(píng)論 2 1