HTML5學堂（碼匠）：CSS編碼規範到底意味著什麼？同樣都能夠實現代碼，為何還有去考慮編碼規範？從維護角度來說，編碼在絕大多數情況下是拿給人來看的，只是偶爾讓機器讀一下。瞭解基本的編碼規範，對自己日後的維護，或者自己小夥伴的維護是有推進作用的。另一方面，優秀的代碼會讓團隊工作事半功倍，不同的編碼習慣，其實也直接影響著薪資。如下列出了大型互聯網企業中對編碼規範的要求，既然要做開發者，為何不做一個優秀的開發者呢？

單行形式書寫風格的排版約束

1.每一條規則的大括號 { 前後加空格

2.多個selector共用一個樣式集，則多個selector必須寫成多行形式

3.每一條規則結束的大括號 } 前加空格

4.屬性名冒號之前不加空格，冒號之後加空格

5.每一個屬性值後必須添加分號; 並且分號後空格

例如：

div.test { width: 100px; height: 200px; }

a:focus,

a:hover { position: relative; right: 1px; }

多行形式書寫風格的排版約束

1.每一條規則的大括號 { 前添加空格

2.多個selector共用一個樣式集，則多個selector必須寫成多行形式

3.每一條規則結束的大括號 } 必須與規則選擇器的第一個字符對齊

4.屬性名冒號之前不加空格，冒號之後加空格

5.屬性值之後添加分號;

其他規範

1.使用單引號，不允許使用雙引號

2.如果使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照webkit- / -moz- / -ms- / -o- / std的順序進行添加，標準屬性寫在最後，並且屬性名稱要對齊，例如：

div.animation-demo {

-webkit-animation: mymove 5s infinite;

-moz-animation: mymove 5s infinite;

-o-animation: mymove 5s infinite;

animation: mymove 5s infinite;

}

命名規則書寫規範

1、規則命名中，一律採用小寫加中劃線的方式，不允許使用大寫字母或 _

2、命名避免使用中文拼音，應該採用更簡明有語義的英文單詞進行組合

3、命名注意縮寫，但是不能盲目縮寫，具體請參見常用的CSS命名規則

4、不允許通過1、2、3等序號進行命名

5、避免class與id重名

6、id用於標識模塊或頁面的某一個父容器區域，名稱必須唯一，不要隨意新建id

7、class用於標識某一個類型的對象，命名必須言簡意賅。

8、儘可能提高代碼模塊的複用，樣式儘量用組合的方式

9、規則名稱中不應該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關的信息。應該用意義命名，而不是樣式顯示結果命名。

10、除了重置瀏覽器默認樣式外，禁止直接為html tag添加css樣式設置，例如：

div {

width: 200px;

font-size: 16px;

}

11、每一條規則應該確保選擇器唯一，禁止直接為全局.nav/.header/.body等類設置屬性

屬性編寫順序

推薦的樣式編寫順序

1、顯示屬性display/list-style/position/float/clear

2、自身屬性（盒模型）width/height/margin/padding/border

3、背景background

4、行高line-height

5、文本屬性color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content

6、其他cursor/z-index/zoom

7、CSS3屬性transform/transition/animation/box-shadow/border-radius

8、鏈接的樣式請嚴格按照如下順序添加：a:link -> a:visited -> a:hover -> a:active（LoVeHAte）

性能優化

1.選擇器應該在滿足功能的基礎上儘量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設置。

2.注意選擇器的性能，不要使用低性能的選擇器，例如：

div > * {}

ul > li > a {}

body.profile ul.tabs.nav li a {}

3.禁止在css中使用*選擇符

4. 除非必須，否則，一般有class或id的，不需要再寫上元素對應的tag，例如：

div#test { width: 100px; }

5.0後面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px

6.如果是16進製表示顏色，則顏色取值應該大寫。

7.如果可以，顏色儘量用三位字符表示，例如#AABBCC寫成#ABC

8.如果沒有邊框時，不要寫成border:0，應該寫成border:none

9.儘量避免使用AlphaImageLoader

10.在保持代碼解耦的前提下，儘量合併重複的樣式

11.background、font等可以縮寫的屬性，儘量使用縮寫形式

hack

IE6 * html selector { … }

IE7 *+html selector { … }

非IE6 html>body selector { … }

firefox @-moz-document url-prefix() { … }

safari3+/chrome @media screen and (-webkit-min-device-pixel-ratio:0) { … }

opera @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { … }

iPhone/mobile webkit @media screen and (max-device-width: 480px) { … }

z-index取值規範

CSS編碼規範 - HTML5學堂（碼匠）

其他

1、字體名稱請映射成對應的英文名，例如：黑體(SimHei) 宋體(SimSun) 微軟雅黑 (Microsoft Yahei)，如果字體名稱中有空格，則必須加單引號。

2、背景圖片請合理使用csssprites，按照模塊、業務、頁面來劃分均可

3、css背景圖片的文件類型，請按照以下原則來保存：

3.1 如果背景圖片有動畫，則保存成gif

3.2 如果沒有動畫，也沒有半透明效果，則保存成png-8

3.3 如果有半透明效果，則保存成png-24

4、不要在html中加入標籤來清理浮動，通過在浮動元素的父元素上添加.clearfix來清除浮動

5、為了SEO和頁面可用性，請使用text-indent來隱藏文本內容。

6、製作css sprites時，儘量把顏色相近的圖標放在一起，存儲為png8格式，存儲完以後還能用一些壓縮工具進行無損壓縮。

7、避免過小的背景圖片平鋪。

8、儘量少用!important

9、避免使用非一次性expression

HTML5學堂（碼匠） - https://weixin.mj216.com/