代碼君推薦：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縮寫屬性

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

去掉小數點前的“0”

簡寫命名

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

16進制顏色代碼縮寫

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

連字符CSS選擇器命名規范

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

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

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

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

3.）能良好區分JavaScript變量命名（JS變量命名是用“_”）

這里有一篇破折號與下劃線的詳細討論，英文版： 點擊查看 中文版： 點擊查看

不要隨意使用id

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

為選擇器添加狀態前綴

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

id的命名:

</div>

[ 文章摘錄結束 ]

為了方便大家更好地學習CSS書寫順序及相應規范，代碼君袁程旭特地將這篇文章中的內容制作成了一張1366 * 759的圖片，喜歡的朋友可下載此圖設置為桌面背景，這樣在平常編碼的時候就可以很方便地查看這些規則、并嚴格遵照規則編寫規范樣式代碼了。（PS：可拖動圖片查看大圖；）

對于這篇文章中未提及的一些東西，袁程旭將在接下來的文章中加以補充。

CSS文件結構目錄：

1. 重置瀏覽器默認樣式

2. 全局常用 CSS 樣式

3. 表單及表單元素

4. 頁面布局以及通用的區塊樣式

5. 列表樣式

6. 其他特定功能塊

CSS 樣式模塊的格式示例：

Name:模塊名稱

Level:級別(Global, Channel, Function)

Dependent:依賴關系,該模塊必須依賴于何種模塊

Sample:用法示例,或指出改模塊所作用的直接頁面

Explain:附加說明

Author:創建者 日期(兩位數年月日時)

Last Modify:最終修改者 日期(兩位數年月日時)

CSS注釋規范：

1. 文件頂部注釋（推薦使用）

2. 模塊注釋（模塊注釋必須單獨寫在一行）

3. 單行注釋與多行注釋

/* this is a short comment */單行注釋可寫在單獨一行，也可寫在行尾，注釋中每行長度不超過40個漢字（80個英文字符）

4. 特殊注釋

5. 區塊注釋

CSS 寫作注意事項:

1. 屬性寫在一行內，屬性之間、屬性名和值之間以及屬性與“{}”之間須有空格；

例如： .class { width: 400px; height: 300px; }

2. 屬性的書寫順序：

2.1 ) 針對特殊瀏覽器的屬性，應寫在標準屬性之前；

例如: -webkit-box-shadow:; -moz-box-shadow:; box-shaow:;

2.2 ) 謹慎添加新的選擇符規則，尤其不可濫用 id，盡可能繼承和復用已有樣式；

3. 選擇符、屬性、值均用小寫(格式的顏色值除外)，縮寫的選擇符名稱須說明縮寫前的全稱；

例如： .cl -> Clearfix

4. 避免使用各種 CSS Hack，如需對 IE 進行特殊定義，請自行查閱“關于 CSS Hack 的說明”；

5. 勿使用冗余低效的 CSS 寫法，例如： ul li a span { ... }

6. 慎用 !important 。其次，避免在CSS中使用@import，嵌套不要超過一層；

7. 建議使用在 class/id 名稱中的詞語：

7.1 ) 表示狀態：a->active

7.2 ) 表示結構：h->header，c->content，f->footer

7.3 ) 表示區域：mn->main，sd->side，nv-navigation，mu->menu

7.4 ) 表示樣式：l-list，tab，p_pop

8. 文件名、文件編碼及文件大小；

8.1 ) 文件名應該由小寫字母、數字、中劃線組成；

8.2 ) 文件建議用UTF-8編碼，使用UTF-8（非BOM），在HTML中指定UTF-8編碼，在CSS中則不需要特別指定（因為默認就是UTF-8）；

8.3 ) 單個CSS文件避免過大（建議少于300行）；

9. 開發過程中的未定事項，須用 [!] 標出，以便于后續討論整理；

最后總結：

規范化編碼有利于程序的后期維護，并且別人也容易理解其中意思。可能你比較習慣怎么喜歡怎么編碼的方式，但養成良好的編碼習慣是成為一位優秀前端開發人員的必備素質，相信每個人都可以養成這些并不難學的優秀習慣。為了長遠發展考慮，袁程旭建議大家應該重視這些編碼習慣。

當然，本文所述內容并不完全是絕對正確的指導，但學會了這些內容，你就學會了最基本的CSS編碼規范。可參考本文內容，結合您自己的部分編碼習慣，編寫適合您的優秀、規范代碼。

（本站CSS文件部分截圖展示）

來源： 代碼君（daimajun.com） |  歡迎分享本文，轉載請注明出處！