三、CSS规范

1.代码风格

• 采用utf-8编码，在css头部引用@charset"utf-8"
• 采用4个空格作为一个缩进层级，（对于这点可忽略，因为现在有许多编辑器有格式化插件）
• 选择器嵌套层级不大于3级。越后限定条件尽可能精确、
• 尽量不用@import导入css样式文件。因为相比于<links>导入，其速度较慢
• Media Query不得单独编排，必须与相应规则一起定义。

2.样式属性顺序

全局属性>定位属性>自身属性>文本样式>文本效果>背景属性>渲染属性>其他

.class-name {
    /*全局属性*/
    display: block;
    float: none;
    list-style: none;
    
    /*定位属性*/
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom:  0;
    z-index: 0;

    /*自身属性*/ 
    box-sizeing: boder-box;
    margin: 0 auto;
    padding: 0;
    width: inherit;//继承父级的
    min-width: none;
    max-width: none;
    height: inherit;
    min-height: 0;
    max-height: 0;
    border: none;
    border-radius: 0;
    
    /*文本样式*/
    font: inherit bold 12px/32px "new york";//等价于font-style: inherit; font-wight: bold; font-size: 12px;line-height: 32px;font-family: "new york";有多个这样的属性时建议采用简写形式，以减少代码行。
    color: #ffffff;
    font-size: 12px;
    font-style: inherit;
    font-family: "new york";
    font-weight: bold;

    /*文本效果*/
    line-height: 32px;
    text-align: center;
    vertical-align: center;
    white-space: normal;
    letter-spacing: normal;
    word-spacing: normal;
    word-break: break-all;

    /*背景属性*/
    background: #ffffff url('图片路径') no-repeat  60px 10px top left;
    background-clip: border-box;
    background-color: #ffffff;
    background-origin: border-box;
    background-size: 60px 10px;
    background-position: top left;

    /*渲染效果属性*/
    opacity: inherit;
    outline: none;
    box-shadow: none;
    transition: all;
    transform: inherit;
    animation: .25s,100ms;
    
    /*其他*/
    cursor: pointer;
    pointer-events: auto; 
}

上面的pointer-events属性如需了解请看CSS之pointer-events属性
ps:按照上述规范，能减少浏览器reflow(回流)，提升浏览器渲染dom的性能

3.缩写与属性值

缩写有助提高合作的小伙伴的阅读体验。

• 缩写
  可以进行缩写的属性有 padding、border、margin、font、background等。

background: color image repeat fixed left top; /*推荐*/
/*不推荐*/
background-color: #fff;//颜色有可以简写的规则
background-image: url("图片地址");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;

• 当数值位小数时，可以去掉小数点前面的"0"

opacity: .7;/*推荐*/
opacity: 0.7;/*不推荐*/

• "0像素"去掉后面的单位\

width: 0px;/*不推荐*/
width: 0;/*推荐*/

• 16进制的颜色代码重叠的字符可以缩写的尽量缩写。

color: #fff;/*推荐*/
color: #ffffff;/*不推荐*/

4.规则声明块样式规范

1.每条样式独占一行
2.选择器分组时，统一个组的选择器独占一行，且逗号后必须跟一个空格
3.属性名与冒号之间，不能有空格，冒号与属性之间，必须有一个空格。
4.每条样式以分号结尾。
5.右大括号'}'独占一行。
6.最外层引号用单引号' '。
7一个属性有多个属性值时，用逗号分隔，逗号后添加一个空格，属性值过长单独占一行。
8.每个规则声明间用空行分隔。

ps:现在许多开发工具都有格式化插件，所以2、3、4、7可以忽略。

5.命名规范

1.一律小写
2.英文
3.命名短且语义化
4.有多个单词的，每个单词小写然后用‘-’相连
5.不建议用下划线命名，存在兼容问题，并且js变量名也是用下划线，易混淆
6.不要滥用id标识，id是js中惟一的，不建议多次使用。应按需使用
7.统一语义理解和命名，如下所示：

• 布局：以g为命名空间
• 状态： 以s为命名空间，表示动态的、具有交互的状态。
• 工具：以u为命名空间，表示不耦合业务逻辑的、可复用的工具。
• 组件：以m为命名空间、表示可复用、移植的组件模块。
• 钩子：以j为命名空间，表示给js调用的类名。

布局(.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
注册	regits	reg
投票	vote	vote
版权	copyright	cprt
结果	result	rst
标题	title	tt
按钮	button	btn
输入	input	ipt

功能(.f-)

语义	命名	简写
浮动清楚	clear-botn	cb
向左浮动	float-left	fl
向右浮动	float-right	fr
内联块级	inline-block	ib
文本居中	text-align-center	tac
文本居右	text-align-right	tar
文本居左	text-align-left	tal
垂直居中	vertical-align-middle	vam
溢出隐藏	overflow-hidden	oh
完全消失	display-none	dn
字体大小	fontsize	fs
字体粗细	font-weight	fw

注：个人觉得功能这块的应用不大，因为博主暂时遇到的基本上不会单独的提出功能的块（除清楚浮动的有过应用），除非是那种一键换肤的。

皮肤(.s-)

语义	命名	简写
字体颜色	font-color	fc
背景	background	bg
背景颜色	background-color	bgc
背景图片	background-image	bgi
背景定位	background-position	bgp
边框颜色	border-color	bdc

状态(.z-)

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

6.注释规范

/*开始*/
  内容
/*结束*/

未完待续......

注：本文章是博主看以下文章做的笔记
CSS样式使用规范
CSS规范标准
如有侵权，请联系博主删除