CSS書寫規范、命名規范、網易CSS框架NEC

網易CSS框架NEC：http://nec.netease.com/

NEC框架的CSS規范： 

CSS規范 - 分類方法

CSS規范 - 命名規則

CSS規范 - 代碼格式

CSS規范 - 優化方案

CSS規范 - 最佳實踐

CSS規范 - 典型錯誤

NEC - 代碼庫

NEC - 案例

 

---

 

統一語義理解和命名

布局（.g-）

語義	命名	簡寫
文檔	doc	doc
頭部	head	hd
主體	body	bd
尾部	foot	ft
主欄	main	mn
主欄子容器	mainc	mnc ( c 表示 child )
側欄	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

 

---

 

/*
#hd                Header
    #nv            Navigation
    #mu            Customer menu
.wp                Wrap
#ct                Container
    .mn            Main area
    .sd            Side area
#ft                Footer
----------------
.bm                Block in main area
.bn                Block in nerrow area
.bw                Block in full width

#pp                Personal Panel
.pm                Personal Message (Window)
.pmfl            PM friend list (Window)
*/

 

---

 

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

關於團隊合作的css命名規范

 

(推薦)頁面部件庫整理

page -> grid(網格/布局) -> module(模塊) -> widget(組件) -> unit(元件) -> figure(圖形，比如說某個按鈕)