CSS規範 - 最佳實踐

最佳選擇器寫法（模塊）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

/* 這是某個模塊 */ .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時使用） */

統一語義理解和命名

佈局（.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