推薦大家使用的CSS書寫規範、順序

標籤：class   blog   java   http   tar   ext   

寫了這麼久的CSS，但大部分前端er都沒有按照良好的CSS書寫規範來寫CSS代碼，這樣會影響代碼的閱讀體驗，這裡設計達人網總結一個CSS書寫規範、CSS書寫順序供大家參考，這些是參考了國外一些文章以及我的個人經驗總結出來，我想對寫CSS的前端使用者來說是值得學習的。

 

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選取器，為什麼呢？

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

瀏覽器安全色問題 （比如使用_tips的選取器命名，在IE6是無效的）

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

 

這裡有一篇破折號與底線的詳細討論，英文：點擊查看 中文篇：點擊查看

 

 

不要隨意使用id

 

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

 

 

為選取器添加狀態首碼

 

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

 

 

常用的CSS命名規則

 

頭：header

內容：content/container

尾：footer

導航：nav

側欄：sidebar

欄目：column

頁面外圍控制整體佈局寬度：wrapper

左右中：left right center

登入條：loginbar

標誌：logo

廣告：banner

頁面主體：main

熱點：hot

新聞：news

下載：download

子導航：subnav

菜單：menu

子功能表：submenu

搜尋：search

友情連結：friendlink

頁尾：footer

著作權：copyright

滾動：scroll

內容：content

標籤：tags

文章列表：list

提示資訊：msg

小技巧：tips

欄目標題：title

加入：joinus

指南：guide

服務：service

註冊：regsiter

狀態：status

投票：vote

夥伴：partner

 

注釋的寫法:

 

/* Header */

內容區

/* End Header */

 

id的命名:

 

(1)頁面結構

 

容器: container

頁頭：header

內容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

頁面外圍控制整體佈局寬度：wrapper

左右中：left right center

 

(2)導航

 

導航：nav

主導航：mainnav

子導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

菜單：menu

子功能表：submenu

標題: title

摘要: summary

 

(3)功能

 

標誌：logo

廣告：banner

登陸：login

登入條：loginbar

註冊：register

搜尋：search

功能區：shop

標題：title

加入：joinus

狀態：status

按鈕：btn

滾動：scroll

標籤頁：tab

文章列表：list

提示資訊：msg

當前的: current

小技巧：tips

表徵圖: icon

注釋：note

指南：guild

服務：service

熱點：hot

新聞：news

下載：download

投票：vote

夥伴：partner

友情連結：link

著作權：copyright

 

注意事項:

 

1.一律小寫;

2.盡量用英文;

3.不加中槓和底線;

4.盡量不縮寫，除非一看就明白的單詞。

 

 

 

CSS樣式表檔案命名

 

主要的 master.css

模組 module.css

基本共用 base.css

布局、版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補丁 mend.css

列印 print.css