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(图形，比如说某个按钮)