2.3.1 样式文件
样式文件必须写上 @charset 规则,并且一定要在样式文件的第一行首个字符位置开始写,编码名用 “UTF-8”。
推荐:
@charset "UTF-8";
.jdc {}
不推荐:
/* @charset规则不在文件首行首个字符开始 */
@charset "UTF-8";
.jdc {}
/* @charset规则没有用小写 */
@CHARSET "UTF-8";
.jdc {}
/* 无@charset规则 */
.jdc {}
2.3.2 代码格式化
样式书写一般有两种:一种是紧凑格式 (Compact),一种是展开格式(Expanded)。
推荐:展开格式(Expanded)
.jdc {
display: block;
width: 50px;
}
不推荐:紧凑格式 (Compact)
.jdc { display: block; width: 50px;}
2.3.3 代码大小写
样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。
推荐:
.jdc {
display: block;
}
不推荐:
.JDC {
DISPLAY: BLOCK;
}
2.3.4 代码易读性
左括号与类名之间一个空格,冒号与属性值之间一个空格。
推荐:
.jdc {
width: 100%;
}
不推荐:
.jdc{
width:100%;
}
逗号分隔的取值,逗号之后一个空格。
推荐:
.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
不推荐:
.jdc {
box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}
为单个 CSS 选择器或新声明开启新行。
推荐:
.jdc, .jdc_logo, .jdc_hd {
color: #ff0;
}
.nav{
color: #fff;
}
不推荐:
.jdc, .jdc_logo, .jdc_hd {
color: #ff0;
}.nav{
color: #fff;
}
颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格,且取值不要带有不必要的 0。
推荐:
.jdc {
color: rgba(255,255,255,.5);
}
不推荐:
.jdc {
color: rgba( 255, 255, 255, 0.5 );
}
属性值十六进制数值能用简写的尽量用简写。
推荐:
.jdc {
color: #fff;
}
不推荐:
.jdc {
color: #ffffff;
}
不要为 0 指明单位。
推荐:
.jdc {
margin: 0 10px;
}
不推荐:
.jdc {
margin: 0px 10px;
}
2.3.5 属性值引号
CSS 属性值需要用到引号时,统一使用单引号。
推荐:
.jdc {
font-family: 'Hiragino Sans GB';
}
不推荐:
.jdc {
font-family: "Hiragino Sans GB";
}
2.3.6 属性书写建议
建议遵循以下顺序:
布局定位属性:display / position / float / clear / visibility / overflow
自身属性:width / height / margin / padding / border / background
文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient …
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
3.3.7 CSS3 浏览器私有前缀
CSS3 浏览器私有前缀在前,标准前缀在后。
.jdc {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}