CSS 規范

• • • 命名
    • 選擇器
    • 盡量使用縮寫屬性
    • 每個選擇器及屬性獨占一行
    • 省略0后面的單位
    • 避免使用ID選擇器及全局標簽選擇器防止污染全局樣式
    • CSS屬性書寫順序
    • CSS命名規范

命名

類名使用小寫字母，以中劃線分隔
id 采用駝峰式命名
scss 中的變量、函數、混合、placeholder 采用駝峰式命名
ID 和 class 的名稱總是使用可以反應元素目的和用途的名稱，或其他通用的名稱，代替表象和晦澀難懂的名稱

不推薦：

.fw-800 {font-weight: 800; }.red {color: red; }

推薦:

.heavy {font-weight: 800; }.important {color: red; }

選擇器

1)css 選擇器中避免使用標簽名
從結構、表現、行為分離的原則來看，應該盡量避免 css 中出現 HTML 標簽，并且在 css 選擇器中出現標簽名會存在潛在的問題。

2)很多前端開發人員寫選擇器鏈的時候不使用 直接子選擇器（注：直接子選擇器和后代選擇器的區別）。有時，這可能會導致疼痛的設計問題并且有時候可能會很耗性能。然而，在任何情況下，這是一個非常不好的做法。如果你不寫很通用的，需要匹配到 DOM 末端的選擇器， 你應該總是考慮直接子選擇器。

不推薦:

.content .title {font-size: 2rem; }

推薦:

.content > .title {font-size: 2rem; }

盡量使用縮寫屬性

不推薦：

border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;

推薦：

border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;

每個選擇器及屬性獨占一行

不推薦：

button{width:100px;height:50px;color:#fff;background:#00a0e9; }

推薦：

button{width:100px;height:50px;color:#fff;background:#00a0e9; }

省略0后面的單位

不推薦：

div{padding-bottom: 0px;margin: 0em; }

推薦：

div{padding-bottom: 0;margin: 0; }

避免使用ID選擇器及全局標簽選擇器防止污染全局樣式

不推薦：

#header{padding-bottom: 0px;margin: 0em; }

推薦：

.header{padding-bottom: 0px;margin: 0em; }

CSS屬性書寫順序

盡量遵循:顯示屬性->盒模型->文字屬性->排版->其他。

例如:

.searchBtn{display:block;position:abtolute;left:2px;top:0;width:50px;height:19px;border:1px solid #ccc;padding:5px 2px;font:Arial 12px/19px;text-align:center;vertical-align:middle;color:#666;background:#999;cursor:pointer; }

CSS命名規范

頭：header
內容：content/containe
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：copyright
滾動：scroll
內容：content
標簽頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
注冊：regsiter
狀態：status
投票：vote
合作伙伴：partner

總結

以上是生活随笔為你收集整理的（四）CSS 规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。