CSS命名规范整理

基于网易NEC修改后，整理的命名规范

单行写完一个选择器定义

便于选择器的寻找和阅读，也便于插入新选择器和编辑，便于模块等的识别。去除多余空格，使代码紧凑减少换行。

如果有嵌套定义，可以采取内部单行的形式。

分类的命名方法：使用单个字母+"-"为前缀

布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮肤（skin）（.s-）；状态（.z-）。

相同语义的不同类命名

方法：直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。

模块和元件的扩展类的命名方法

当A、B、C、...它们类型相同且外形相似区别不大，那么就以它们中出现率最高的做成基类，其他做成基类的扩展。

方法：+“-”+数字或字母（如：.m-list的扩展类为.m-list-1、.m-list-2等）。

补充：基类自身可以独立使用（如：class="m-list"即可），扩展类必须基于基类使用（如：class="m-list m-list-2"）。

选择器等级

1吨 = 行内样式style。

100斤 = ID选择器。

1斤 = 类、伪类和属性选择器。

1克 = 类型选择器和伪元素选择器。

统一语义理解和命名

语义　　　　 命名
文档　　　　 doc
头部　　　　 head
主体　　　　 body
尾部　　　　 footer
主栏　　　　 main
主栏子容器    main-in
侧栏　　　　 aside
侧栏子容器   aside-in
盒容器　　   wrap/box

布局（.g-）
语义	命名
文档	doc
头部	head
主体	body
尾部	footer
主栏	main
主栏子容器	main-in
侧栏	aside
侧栏子容器	aside-in
盒容器	wrap/box

模块（.m-）、元件（.u-）
语义	命名
导航	nav
子导航	subnav
面包屑	crumb
菜单	menu
选项卡	tab
标题区	head/title
内容区	body/content
列表	list
表格	table
表单	form
热点	hot
排行	top
登录	login
标志	logo
广告	advertise
搜索	search
幻灯	slide
提示	tips
帮助	help
新闻	news
下载	download
注册	regist
投票	vote
版权	copyright
结果	result
标题	title
按钮	button
输入	input