首頁(yè)技術(shù)文章正文

前端潛規(guī)則:CSS書(shū)寫(xiě)規(guī)則

更新時(shí)間:2017-11-29 來(lái)源:黑馬程序員 瀏覽量:

一、CSS書(shū)寫(xiě)順序

1、位置屬性(position, top, right, z-index,display, float等)

2、大小(width, height, padding, margin)

3、文字系列(font, line-height, letter-spacing, color-text-align等)

4、背景(background, border等)

5、其他(animation, transition等)

二、CSS書(shū)寫(xiě)規(guī)范

1、使用CSS縮寫(xiě)屬性

CSS有些屬性是可以縮寫(xiě)的,比如padding,margin,font等等,這樣精簡(jiǎn)代碼同時(shí)又能提高用戶的閱讀體驗(yàn)。

2、去掉小數(shù)點(diǎn)前的“0”

3、簡(jiǎn)寫(xiě)命名

很多用戶都喜歡簡(jiǎn)寫(xiě)類名,但前提是要讓人看懂你的命名才能簡(jiǎn)寫(xiě)哦!

4、16進(jìn)制顏色代碼縮寫(xiě)

有些顏色代碼是可以縮寫(xiě)的,我們就盡量縮寫(xiě)吧,提高用戶體驗(yàn)為主。

5、連字符CSS選擇器命名規(guī)范

1)、長(zhǎng)名稱或詞組可以使用中橫線來(lái)為選擇器命名。

2)、不建議使用“_”下劃線來(lái)命名CSS選擇器

6、不要隨意使用id

id在JS是唯一的,不能多次使用,而使用class類選擇器卻可以重復(fù)使用。

7、為選擇器添加狀態(tài)前綴

有時(shí)候可以給選擇器添加一個(gè)表示狀態(tài)的前綴,讓語(yǔ)義更明了,比如下圖是添加了“.is-”前綴。

三、CSS命名規(guī)范(規(guī)則)

常用的CSS命名規(guī)則

頭:header

內(nèi)容:content/container

尾:footer

導(dǎo)航:nav

側(cè)欄:sidebar

欄目:column

頁(yè)面外圍控制整體佈局寬度:wrapper

左右中:left right center

登錄條:loginbar

標(biāo)志:logo

廣告:banner

頁(yè)面主體:main

熱點(diǎn):hot

新聞:news

下載:download

子導(dǎo)航:subnav

菜單:menu

子菜單:submenu

搜索:search

友情鏈接:friendlink

頁(yè)腳:footer

版權(quán):copyright

滾動(dòng):scroll

內(nèi)容:content

標(biāo)簽:tags

文章列表:list

提示信息:msg

小技巧:tips

欄目標(biāo)題:title

加入:joinus

指南:guide

服務(wù):service

注冊(cè):regsiter

狀態(tài):status

投票:vote

合作伙伴:partner

注釋的寫(xiě)法:

/* Header */

內(nèi)容區(qū)

/* End Header */

id的命名:

1) 頁(yè)面結(jié)構(gòu)

容器: container

頁(yè)頭:header

內(nèi)容:content/container

頁(yè)面主體:main

頁(yè)尾:footer

導(dǎo)航:nav

側(cè)欄:sidebar

欄目:column

頁(yè)面外圍控制整體佈局寬度:wrapper

左右中:left right center

(2) 導(dǎo)航

導(dǎo)航:nav

主導(dǎo)航:mainnav

子導(dǎo)航:subnav

頂導(dǎo)航:topnav

邊導(dǎo)航:sidebar

左導(dǎo)航:leftsidebar

右導(dǎo)航:rightsidebar

菜單:menu

子菜單:submenu

標(biāo)題: title

摘要: summary

(3) 功能

標(biāo)志:logo

廣告:banner

登陸:login

登錄條:loginbar

注冊(cè):register

搜索:search

功能區(qū):shop

標(biāo)題:title

加入:joinus

狀態(tài):status

按鈕:btn

滾動(dòng):scroll

標(biāo)籤頁(yè):tab

文章列表:list

提示信息:msg

當(dāng)前的: current

小技巧:tips

圖標(biāo): icon

注釋:note

指南:guild

服務(wù):service

熱點(diǎn):hot

新聞:news

下載:download

投票:vote

合作伙伴:partner

友情鏈接:link

版權(quán):copyright

四、注意事項(xiàng):

1、一律小寫(xiě);

2、盡量用英文;

3、不加中槓和下劃線;

4、盡量不縮寫(xiě),除非一看就明白的單詞。

五、CSS樣式表文件命名

主要的 master.css

模塊 module.css

基本共用 base.css

布局、版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補(bǔ)丁 mend.css

打印 print.css


本文版權(quán)歸黑馬程序員前端與移動(dòng)開(kāi)發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!

作者:黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)學(xué)院

首發(fā):http://web.itheima.com/

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!