CSS样式使用规范

一，代码风格

1、采用UTF-8编码，在CSS头部引用 @charset "utf-8";

2、使用4个空格作为一个缩进层级，不允许使用2个空格或tab字符 

3、每行不得超过120个字符，除非单行不可分割

4、选择器嵌套层级不大于3级，位置靠后的限定条件应尽可能精确。

 5、尽量不要使用@import，与相比，@import速度较慢，增加了额外的页面请求，并可能导致其他无法预料的问题。

 6、Media Query不得单独编排，必须与相关的规则一起定义。

 

二，样式属性顺序

1、布局位置（position，top，right，z-index，display，float等）

2、尺寸大小（宽度，高度，填充，边距）

3、文字系列（字体，行高，字母间距，颜色文字对齐等）

4、视觉效果（background，border等）

5、其他（动画，转换等）

三，缩写属性和属性值

1、CSS有些属性是可以缩写的，比如填充，边缘，字体，背景，边框等等。缩写代码可以提高用户的阅读体验

2、当数值为小数时，小数点前面的“0”可以去除

3、“0像素”后面的单位可以去除

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

四，规则声明块样式规范

1、当规则声明块中有多个样式声明时，每条样式独占一行。

2、列表属性并排书写时，用逗号分隔，逗号后必须跟一个空格

3 、选择器与左大括号 {之间必须加一个空格

4、属性名与冒号之间不允许包含空格，冒号与属性值之间必须包含空格

5、在每条样式后面都以分号; 结尾。

6、规则声明块的右大括号} 独占一行。

 7、所有最外层引号使用单引号 ' ' 。

8、当一个属性有多个属性值时，以逗号, 分隔属性值，每个逗号后添加一个空格，当单个属性值过长时，每个属性值独占一行。

9、每个规则声明间用空行分隔。

 

五，命名规范

1、一律小写

2、尽量用英文
3、命名短且语义化要好
4、名字长的单词可以选择使用烤串命名法，中间加横线来为选择器命名

 

• 布局：以g 为命名空间，例如：.g-wrap 、.g-header、.g-content。
• 状态：以s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。
• 工具：以u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis。
• 组件：以m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu。
• 钩子：以j 为命名空间，表示特定给JavaScript 调用的类名，例如：j-request、j-open。

 5、不建议使用下划线来命名，存在浏览器兼容性问题，其次是JavaScript的变量命名也是用下划线，容易造成混淆。
 6、不要滥用id标识，id在JS中是唯一的，不能多次使用，应该按需使用
 7、统一语义理解和命名（如表所示）

• 布局（.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
注册	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

 

 

六，注释规范

/* Header */

内容区

/* End Header */

 

七，css样式表命名

 

主要的	master.css	布局、版面	layout.css
基本共用	base.css	文字	font.css
打印	print.css	模块	module.css
表单	forms.css	主题	themes.css
专栏	column	补丁	mend.css

 

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料