CSS 樣式書寫順序及規范

作者:WangMin
格言:努力做好自己喜歡的每一件事

在項目中，大部分前端程序員都沒有按照良好的CSS書寫規范來寫CSS代碼，每次寫css樣式都是用到什么就在樣式表后添加什么，完全沒有考慮到樣式屬性的書寫順序對網頁加載代碼的影響。后來逐漸才知道正確的樣式順序不僅易於查看，並且也屬於css樣式優化的一種方式。下面就開始學習吧！！

各種類型屬性的書寫順序及作用

書寫順序

1. 優先級第一定位屬性：position display float left top right bottom overflow clear z-index
2. 優先級第二自身屬性：width height padding border margin background
3. 優先級第三文字樣式：font-family font-size font-style font-weight font-varient color
4. 優先級第四文本屬性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height
5. 優先級第五css3中新增屬性：content box-shadow border-radius transform……

書寫順序的作用

減少瀏覽器reflow（回流），提升瀏覽器渲染dom的性能。

1. 解析html構建dom樹，解析css構建css樹：將html解析成樹形的數據結構，將css解析成樹形的數據結構
2. 構建render樹：DOM樹和CSS樹合並之后形成的render樹。
3. 布局render樹：有了render樹，瀏覽器已經知道那些網頁中有哪些節點，各個節點的css定義和以及它們的從屬關系，從而計算出每個節點在屏幕中的位置。
4. 繪制render樹：按照計算出來的規則，通過顯卡把內容畫在屏幕上。

css樣式解析到顯示至瀏覽器屏幕上就發生在2、3、4步驟，可見瀏覽器並不是一獲取到css樣式就立馬開始解析而是根據css樣式的書寫順序將之按照dom樹的結構分布render樣式，完成第2步，然后開始遍歷每個樹結點的css樣式進行解析，此時的css樣式的遍歷順序完全是按照之前的書寫順序。

這里大家可能不是很理解，但只要記住書寫樣式時按照上面的書寫順序就會提高程序的性能與網頁的流暢度。

<div id="box"></div>

未按照屬性書寫順序：

#box{
	width:200px;
	line-height: 30px;
	height:200px;
	color:blue;
	background:lightgoldenrodyellow;
	float:right;
}

按照屬性書寫順序：（推薦使用）

#box{
        float:right;
	width:200px;
	height:200px;
	background:lightgoldenrodyellow;
	color:blue;
	line-height: 30px;
}

CSS 書寫規范

1 、使用CSS縮寫屬性

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

未縮寫之前：

#box p{
	border-top-style: none;
	padding-left: 10px;
	padding-right: 20px;
	padding-top: 40px;
	padding-bottom: 50px;
	font-size: 12px;
	font-family: "微軟雅黑";
	line-height: 30px;	
}

縮寫之后：（推薦使用）

#box p{
	border-top: 0;
	padding:40px 20px 50px 10px;
	font:12px/40px "微軟雅黑";
}

簡寫font屬性需要注意以下幾點：

• 按照font-style font-variant font-weight font-size/line-height font-family順序來寫；
• 先寫字體大小在寫字體；
• font-size/line-height作為一組使用，中間用斜杠區分；
• 多個值之間用空格分開；
• 多個字體之間用逗號分開。

2、去掉小數點前的“0”

當屬性值為小數並且小數點前面為0時，我們可以把0去掉，只需要將小數點與小數點后面的數字寫出來就可以了。 如下：

未去0之前：

font-size:0.9rem;

去0之后：（推薦使用）

font-size:.9rem;

3、16進制顏色代碼縮寫

有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。顏色代碼是用十六進制來表示的，當顏色代碼如下時可以進行縮寫：

未縮寫之前：

background:#ff0000;

縮寫之后：（推薦使用）

background:#f00;

4、連字符CSS選擇器命名規范

1）長名稱或詞組可以使用中橫線來為選擇器命名。
2）下划線 ' _' 禁止出現在class命名中，全小寫，統一使用 '-' 連字符。原因如下：

• 瀏覽器兼容問題 （比如使用_tips的選擇器命名，在IE6是無效的）
• 能良好區分JavaScript變量命名（JS變量命名是用“_”）

正確命名方法如下：

#box-text{
	border-top: 0;
	background:#f00;
	padding:40px 20px 50px 10px;
	font:12px/40px "微軟雅黑";
}

5、不要隨意使用Id

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

6、為選擇器添加狀態前綴

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

.test{
	background:#f00;
}

添加了“.is-”前綴之后：（推薦使用）

.is_test{
	background:#f00;
}

7、刪除CSS屬性值為0的單位。
8、刪除無用CSS樣式。
9、使用有意義的名稱，使用結構化或者作用目標相關的，而不是抽象的名稱。
10、盡量不縮寫，除非一看就明白的單詞。
11、一律小寫，不要使用駝峰命名法，例如：className。

CSS 命名規范（規則）

1、頁面結構

網頁結構	CSS命名
頭	header
內容	content/container
頁面主體	main
尾	footer
導航	nav
側欄	sidebar
欄目	column
頁面外圍控制整體佈局寬度	wrapper
左右中	left right center

2、導航

網頁結構	CSS命名
導航	nav
主導航	mainbav
子導航	subnav
頂導航	topnav
邊導航	sidebar
左導航	leftsidebar
右導航	rightsidebar
菜單	menu
子菜單	submenu
標題	title
摘要	summary

3、功能

網頁結構	CSS命名
標志	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
友情鏈接	friendlink
版權	copyright

4、CSS樣式表文件命名

所表示的文件	文件名
主要的	master.css
模塊	module.css
基本共用	base.css
布局、版面	layout.css
主題	themes.css
專欄	columns.css
文字	font.css
表單	forms.css
補丁	mend.css
打印	print.css

5、css的注釋方法

/* start*/
css樣式區
/* End */

6、class的命名:
1）顏色 : 使用顏色的名稱或者16進制代碼，如下：

.yellow{color:yellow}
.f00{background:#f00}
.ff8600 {color: #ff8600} 

2）字體大小 : 直接使用"font+字體大小"作為名稱，如下：

.font12px{font-size:12px}
.font1rem {font-size: 1rem; } 

3）對齊樣式 : 使用對齊目標的英文名稱，如下：

.left { float:left; } 
.bottom { float:bottom; } 

4） 標題欄樣式，使用"類別+功能"的方式命名，如下：

.hotnews { } 
.hotproduct { } 

---

以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這里!! 😄 后續繼續更新!!