CSS樣式使用規範

1、代碼風格

1. 採用UTF-8編碼，在CSS頭部引用 @charset "utf-8";
2. 使用4個空格做爲一個縮進層級，不容許使用2個空格或tab字符
3. 每行不得超過120個字符，除非單行不可分割
4. 選擇器嵌套層級不大於3級，位置靠後的限定條件應儘量精確。
5. 儘可能不要使用@import，與<links>相比，@import速度較慢，增長了額外的頁面請求，並可能致使其餘沒法預料的問題。
6. Media Query不得單獨編排，必須與相關的規則一塊兒定義。

2、樣式屬性順序

1. 佈局位置（position，top，right，z-index，display，float等）
2. 尺寸大小（寬度，高度，填充，邊距）
3. 文字系列（字體，行高，字母間距，顏色文字對齊等）
4. 視覺效果（background，border等）
5. 其餘（動畫，轉換等）

三，縮寫屬性和屬性值

1. CSS有些屬性是能夠縮寫的，好比填充，邊緣，字體，背景，邊框等等。縮寫代碼能夠提升用戶的閱讀體驗
2. 當數值爲小數時，小數點前面的「0」能夠去除
3. 「0像素」後面的單位能夠去除
4. 16進制的顏色代碼重疊的字符能夠縮寫的儘可能縮寫

四，規則聲明塊樣式規範

1. 當規則聲明塊中有多個樣式聲明時，每條樣式獨佔一行。
2. 列表屬性並排書寫時，用逗號分隔，逗號後必須跟一個空格 3 . 選擇器與左大括號 {之間必須加一個空格
3. 屬性名與冒號之間不容許包含空格，冒號與屬性值之間必須包含空格
4. 在每條樣式後面都以分號; 結尾。
5. 規則聲明塊的右大括號} 獨佔一行。
6. 全部最外層引號使用單引號 ' ' 。
7. 當一個屬性有多個屬性值時，以逗號, 分隔屬性值，每一個逗號後添加一個空格，當單個屬性值過長時，每一個屬性值獨佔一行。
8. 每一個規則聲明間用空行分隔。

五，命名規範

1. 一概小寫

2. 儘可能用英文

3. 命名短且語義化要好

4. 名字長的單詞能夠選擇使用烤串命名法，中間加橫線來爲選擇器命名

   1. 佈局：以g 爲命名空間，例如：.g-wrap . .g-header. .g-content。
   2. 狀態：以s 爲命名空間，表示動態的. 具備交互性質的狀態，例如：.s-current. s-selected。
   3. 工具：以u 爲命名空間，表示不耦合業務邏輯的. 可複用的的工具，例如：u-clearfix. u-ellipsis。
   4. 組件：以m 爲命名空間，表示可複用. 移植的組件模塊，例如：m-slider. m-dropMenu。
   5. 鉤子：以j 爲命名空間，表示特定給JavaScript 調用的類名，例如：j-request. j-open。

5. 不建議使用下劃線來命名，存在瀏覽器兼容性問題，其次是JavaScript的變量命名也是用下劃線，容易形成混淆。

6. 不要濫用id標識，id在JS中是惟一的，不能屢次使用，應該按需使用

7. 統一語義理解和命名（如表所示）</links>

語義	命名	簡寫
佈局（.g-）
文檔	doc	doc
頭部	head	hd
主體	body	bd
尾部	foot	ft
主欄	main	mn
主欄子容器	mainc	mnc
側欄	side	sd
側欄子容器	sidec	sdc
盒容器	wrap/box	wrap/box
模塊（.m-）、元件（.u-）
語義	命名	簡寫
導航	nav	nav
子導航	subnav	snav
麪包屑	crumb	crm
菜單	menu	menu
選項卡	tab	tab
標題區	head/title	hd/tt
內容區	body/content	bd/ct
列表	list	lst
表格	table	tb
表單	form	fm
熱點	hot	hot
排行	top	top
登陸	login	log
標誌	logo	logo
廣告	advertise	ad
搜索	search	sch
幻燈	slide	sld
提示	tips	tips
幫助	help	help
新聞	news	news
下載	download	dld
註冊	regist	reg
投票	vote	vote
版權	copyright	cprt
結果	result	rst
標題	title	tt
按鈕	button	btn
輸入	input	ipt
功能（.f-）
語義	命名	簡寫
浮動清除	clearboth	cb
向左浮動	floatleft	fl
向右浮動	floatright	fr
內聯塊級	inlineblock	ib
文本居中	textaligncenter	tac
文本居右	textalignright	tar
文本居左	textalignleft	tal
垂直居中	verticalalignmiddle	vam
溢出隱藏	overflowhidden	oh
徹底消失	displaynone	dn
字體大小	fontsize	fs
字體粗細	fontweight	fw
皮膚（.s-）
語義	命名	簡寫
字體顏色	fontcolor	fc
背景	background	bg
背景顏色	backgroundcolor	bgc
背景圖片	backgroundimage	bgi
背景定位	backgroundposition	bgp
邊框顏色	bordercolor	bdc
狀態（.z-）
語義	命名	簡寫
選中	selected	sel
當前	current	crt
顯示	show	show
隱藏	hide	hide
打開	open	open
關閉	close	close
出錯	error	err
不可用	disabled	dis