更新時(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/