css書寫規范

在書寫css樣式的時候總是無意中就寫亂了，無論是命名或者是樣式的書寫順序，這里做一個總結，提醒自己在書寫css的時候時刻注意，大家可以參考哈。

1. 樣式屬性順序

單個樣式規則下的屬性在書寫時，應按功能進行分組，組之間需要有一個空行。
同時要以Positioning Model > Box Model > Typographic > Visual 的順序書寫，提高代碼的可讀性。

1. Positioning Model 布局方式、位置，相關屬性包括：position, top, z-index, display, float等
2. Box Model 盒模型，相關屬性包括：width, height, padding, margin，border,overflow
3. Typographic 文本排版，相關屬性包括：font, line-height, text-align
4. Visual 視覺外觀，相關屬性包括：color, background, list-style, transform, animation

2. CSS選擇器命名規則

• 分類式命名法(在前端組件化下尤為重要)

  1. 布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！
  2. 模塊（module）（.m-）：通常是一個語義化的可以重復使用的較大的整體！比如導航、登錄、注冊等
  3. 元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重復用於各種模塊中！比如按鈕、輸 入框、loading等！
  4. 功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！
  5. 狀態（.z-）：為狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或作為后代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}）
  6. javascript(.j-)：.j-將被專用於JS獲取節點，請勿使用.j-定義樣式
• 不要使用 " _ " 下划線來命名css
  能良好的區分javascript變量名
  輸入的時候少按一個shift鍵
  瀏覽器兼容性問題（比如使用_tips的選擇器命名，在IE6是無效的）
• id采用駝峰式命名(不要亂用id)
• scss中的變量、函數、混合、placeholder采用駝峰式命名
• 相同語義的不同類命名方法：
  直接加數字或字母區分即可（如：.m-list、.m-list2、.m-list3等，都是列表模塊，但是是完全不一樣的模塊）。其他舉例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。
• 命名方式(BEM)：類-體（例：g-head）、類-體-修飾符（例：u-btn-active）
• 后代選擇器：體-修飾符即可（例：.m-page .cut{}）注：后代選擇器不要在頁面布局中使用，因為污染的可能性較大；

3. 最佳寫法

    /* 這是某個模塊 */ .m-nav{}/* 模塊容器 */ .m-nav li,.m-nav a{}/* 先共性 優化組合 */ .m-nav li{}/* 后個性 語義化標簽選擇器 */ .m-nav a{}/* 后個性中的共性 按結構順序 */ .m-nav a.a1{}/* 后個性中的個性 */ .m-nav a.a2{}/* 后個性中的個性 */ .m-nav .z-crt a{}/* 交互狀態變化 */ .m-nav .z-crt a.a1{} .m-nav .z-crt a.a2{} .m-nav .btn{}/* 典型后代選擇器 */ .m-nav .btn-1{}/* 典型后代選擇器擴展 */ .m-nav .btn-dis{}/* 典型后代選擇器擴展（狀態） */ .m-nav .btn.z-dis{}/* 作用同上，請二選一（如果可以不兼容IE6時使用） */ .m-nav .m-sch{}/* 控制內部其他模塊位置 */ .m-nav .u-sel{}/* 控制內部其他元件位置 */ .m-nav-1{}/* 模塊擴展 */ .m-nav-1 li{} .m-nav-dis{}/* 模塊擴展（狀態） */ .m-nav.z-dis{}/* 作用同上，請二選一（如果可以不兼容IE6時使用） */

4. 統一語義理解和命名

• 布局(.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
  版權	vcopyright	cprt
  結果	result	rst
  標題	title	tt
  按鈕	button	btn
  輸入	input	ipt

• 功能（.f-）

  語義	命名	簡寫
  清除浮動	clearboth	cb
  左浮動	floatleft	fl
  內聯	inlineblock	ib
  文本居中	textaligncenter	tac
  垂直居中	verticalalignmiddle	vam
  溢出隱藏	overflowhidden	oh
  完全消失	displaynone	dn
  字體大小	fontsize	fz
  字體粗細	fontweight	fs

• 皮膚（.s-）

  語義	命名	簡寫
  字體顏色	fontcolor	fc
  背景顏色	backgroundcolor	bgc
  邊框顏色	bordercolor	bdc

• 狀態(.z-)

  語義	命名	簡寫
  選中	selected	sel
  當前	current	crt
  顯示	show	show
  隱藏	hide	hide
  打開	open	open
  關閉	close vclose
  出錯	error	err
  不可用	disabled	dis

5. 注意事項

1. 一律小寫，中划線
2. 盡量不用縮寫
3. 不要隨便使用id
4. 去掉小數點前面的0： 0.9rem => .9rem
5. 使用簡寫：margin： 0 1rem 3rem

本文大部分內容參考自網易前端規范：http://nec.netease.com/standard/css-sort.html