FED实验室 - 专注WEB端开发和用户体验

前端Code规范之CSS

CSS(3) SPECIFICATION 煦涵 2231℃

一、基本语法
1.使用2个空格soft tabs

2.为选择器分组时,将单独的选择器单独放在一行。

3.为了代码的易读性,在每个声明块的左花括号前添加一个空格。

4.声明块的右花括号应当单独成行。

5.每条声明语句的冒号后应该插入一个空格。

6.为了获得更准确的错误报告,每条声明都应该独占一行。

7.所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。

8.对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格,如:
box-shadow:1px 1px 1px #ccc, 2px 2px 2px #bbb;

9.不要在 rgb() 、 rgba() 、 hsl() 、 hsla() 或 rect() 值的内部的逗号后面插入空格。

10.对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如.5 代替 0.5 ; -.5px 代替 -0.5px )。

11.十六进制值应该全部小写,例如#fff,在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff 。

12.为选择器中的属性添加双引号,例如, input[type="text"] 。 只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。

13.避免为 0 值指定单位,例如用margin: 0; 代替margin: 0px;

二、样式声明及顺序
对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行。对于带有多条声明的样式,还是应当将声明分为多行。

1.Positioning float-定位和浮动

2.Box model-盒模型

3.Typographic-排版

4.border background-边框和背景

5.其它

定位:改变文档流,放在首位
盒模型:决定元素的位置和尺寸,放在第二位
排版:设置文本的呈现方式,涉及文字、行高、对齐、颜色等

.decoration {
	/*positioning and float*/
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 200;
	float: left;
	...

	/*box model*/
	display: inline;
	margin: 10px;
	padding: 10px;
	width:100px;
	height: 100px;
	box-shadow: 1px 1px 1px #ccc;
	...

	/*Typographic*/
	line-height: 1.5;
	font: 12px arial,"simsun";
	color: #333;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 1px #ccc;
	...

	/*border and background*/
	border: 1px solid #ccc;
	background-color: #ccc;
	...

	/*other*/
	overflow: hidden;
	opacity: .8;
	filter: alpha(opacity=80);
	...
}

三、带前缀的属性
当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对其,这样便于多行编辑。在sublime text 中选取多行。

-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   	-ms-broder-radius: 5px;
   	 -o-border-radius: 5px;
		border-radius: 5px;

 

四、属性声明尽量简写
常用的有margin,padding,border,font,background,border-radius等

五、class属性命名
关于class属性命名如何是好,具体和csser布局时有关,具体如何命名更好,以后补充。class属性中涉及到javascript使用的类建议增加js前缀。

六、关于注释
常用/*...*/
单行注释:

/*box model style
==================================== */

多行注释:
/*==================================
box model style
box model style
==================================== */

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (3)or分享 (0)
捐赠共勉