CSS编码规范

说明

依据BEM的思想，参照各大厂的相关规范以及根据自身团队的特色进行构建。

命名

原则

1. 简单、适用、易懂
2. 复用性高，可读性强
3. 根据BEM思想，类名统一采用Block-Element-Module的顺序
4. 命名尽量语义化

注意事项

1. 涉及大框架尽量采用比如header/footer/wrapper/left/right之类的词
2. 如需命名CSS文件尽量采用指示性强的词，如globe、layout、style等等
3. 尽量少用或不用id选择器，尽量用clss类，也少写内联样式
4. 所有的命名一律采用小写，尽量用英文，减少汉语拼音命名思想

独立页面CSS命名

根据其用途和性质，外接的CSS一般要具有指示性：

1. 全局（global.css）：全局样式为全项目公用
2. 结构（layout.css）：页面结构的公用CSS，适用于固定的产品类或首页级别的页面中
3. 私有（style.css）：页面私有的css当有需要为一个页面单独定制CSS的时候使用
4. 模块（module.css）： 一些可复用的类，出现程度较频繁的属性可提取出来，用作模块
5. 主题（theme.css)： 当网站需要修改皮肤的时候的使用
6. 补丁（mend.css）： 基于以上样式进行的私有化修补

页面框架结构命名

页面结构这块主要是配合HTML进行布局的时候使用，应该配合HTML的标签框架使用，便于标识和寻找。下面是一些常见框架的命名规则：

语义	说明（简写）
文档	doc （doc）
头部	head （hd）
主体	body（bd）
尾部	foot（ft）
主栏	main（mn）
主栏子容器	mainc（mnc）
侧栏	side（sd）
侧栏子容器	sidec（sdc）
盒容器	wrap/box（wrap/box）

模块、元件（元素）命名

根据BEM思想，可采用嵌套block的方式，结合模块、元件语义化的思想进行命名，常用的模块元件命令规则如下：

语义	命名（简写）
导航	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）

状态命名

状态是指元件的状态，常见的状态命名规则如下：

语义	命名（简写）
选中	selected（sel）
当前	current（crt）
显示	show（show）
隐藏	hide（hide）
打开	open（open）
关闭	close（close）
出错	error（err）
不可用	disabled（dis）

命名实践

页面框架命名

.doc {
	.head {}
	.body {
		.main {
			.mainc {}
		}
		.side {
			.sidec {}
		}
		.wrap {}
	}
	.foot {}
}

模块、元件（元素命名）

.doc {
	.head {
		.head-nav {}
		.head-crumb {}
	}
	.body {
		.body-list {}
		.body-form {}	
	}
	.foot {
		.foot-copyright {}
	}
}

状态命名

.doc {
	.head {
		.head-nav {}
		.head-crumb {}
	}
	.body {
		.body-button-selected {}
		.body-button-hide {}	
	}
	.foot {
		.foot-copyright {}
	}
}

书写规则

原则

1. 能使用简写的时候尽量使用简写

{
	margin : 0 1rem 3rem
}

2. 去掉小数点后面的0

{
   margin : . 9rem
}

3. 当度量为0时不要带单位

{
   margin : 0
}

4.颜色用小写

{
 color : #fff
}

5.所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但建议还是加上，方便维护

书写顺序

遵循定位属性-》自身属性(尺寸)-》文本属性-》其他属性

{
  display: flex;
  width: 100px;
  font-size: 14px;
  color: #fff
}

注释

行间注释

对于需要特别注明的属性，注释应紧跟在属性后面

{
 width: 100px  /*目标宽度*/
}

块注释

对于功能说明，需要在块开始时注释在上方，并用简洁的语言说明功能的作用

/*
 * Component section heading
 */
.element{...}