css的書寫規(guī)范是什么

小編給大家分享一下css的書寫規(guī)范是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

CSS書寫順序

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書寫規(guī)范使用CSS縮寫屬性

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

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

簡寫命名

很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！

16進(jìn)制顏色代碼縮寫

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

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

1.長名稱或詞組可以使用中橫線來為選擇器命名。

2.不建議使用“_”下劃線來命名CSS選擇器，為什么呢？

輸入的時候少按一個shift鍵；

瀏覽器兼容問題 （比如使用_tips的選擇器命名，在IE6是無效的）

能良好區(qū)分JavaScript變量命名（JS變量命名是用“_”）

不要隨意使用id

id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復(fù)使用，另外id的優(yōu)先級優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用。

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

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

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

頭（header），內(nèi)容（content/container）尾（footer），導(dǎo)航（nav），側(cè)欄（sidebar），欄目（column），頁面外圍控制整體佈局寬度（wrapper），左右中（left right center），登錄條（loginbar），標(biāo)志（logo），廣告（banner）頁面主體（main），熱點(diǎn)（hot）,新聞（news）,下載（download）,子導(dǎo)航（subnav），菜單（menu）,子菜單（submenu）,搜索（search），友情鏈接（friendlink）,頁腳（footer）,版權(quán)（copyright）,滾動（scroll）,內(nèi)容（content）,標(biāo)簽（tags）,文章列表（list）,提示信息（msg）,小技巧（tips）,欄目標(biāo)題（title）,加入（joinus）,指南（guide）,服務(wù)（service）,注冊（regsiter）,狀態(tài)（status）,投票（vote）,合作伙伴（partner）

注釋的寫法:
/* Header */內(nèi)容區(qū)/* End Header */

id的命名:

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

容器: container，頁頭：header，內(nèi)容：content/container，頁面主體：main，頁尾：footer，導(dǎo)航：nav，側(cè)欄：sidebar，欄目：column，頁面外圍控制整體佈局寬度：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，注冊：register，搜索：search，功能區(qū)：shop，標(biāo)題：title，加入：joinus，狀態(tài)：status，按鈕：btn，滾動：scroll，標(biāo)籤頁：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.一律小寫;
2.盡量用英文;
3.不加中槓和下劃線;
4.盡量不縮寫，除非一看就明白的單詞。

CSS樣式表文件命名

主要的（master.css） ，模塊（module.css） ，基本共用 （base.css），布局、版面 （layout.css），主題（ themes.css），專欄（columns.css） ，文字（ font.css），表單 （forms.css），補(bǔ)丁（ mend.css），打印 （print.css）

看完了這篇文章，相信你對css的書寫規(guī)范是什么有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！