CSS

代码格式化

使用展开格式（Expanded）书写样式，不使用紧凑格式（Compact）

推荐：

.box {
  display: block;
  width: 50px;
}

不推荐：

.box { display: block; width: 50px; }

代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写

推荐：

.box {
  display: block;
}

不推荐：

.BOX {
  DISPLAY: BLOCK;
}

选择器

• 尽量少用通用选择器 *
• 不使用 ID 选择器
• 不使用无具体语义定义的标签选择器

推荐：

.box {}
.box li {}
.box li p {}

不推荐：

* {}
#box {}
.box div {}

代码缩进

统一使用两个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

.box {
  width: 100%;
  height: 100%;
}

分号

每个属性声明末尾都要加分号

.box {
  width: 100%;
  height: 100%;
}

代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

/* 推荐 */
.box { 
  width: 100%; 
}

/* 不推荐 */
.box{ 
  width:100%;
}

逗号分隔的取值，逗号之后一个空格

/* 推荐 */
.box {
  box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

/* 不推荐 */
.box {
  box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

为单个 CSS 选择器或新申明开启新行

/* 推荐 */
.box, 
.box_logo, 
.box_hd {
  color: #ff0;
}
.nav {
  color: #fff;
}

/* 不推荐 */
.box, .box_logo, .box_hd {
  color: #ff0;
}.nav {
  color: #fff;
}

颜色值 rgb() rgba() hsl() hsla() rect() 中取值不要带有不必要的 0

/* 推荐 */
.box {
  color: rgba(255, 255, 255, .5);
}

/* 不推荐 */
.box {
  color: rgba(255, 255, 255, 0.5);
}

属性值十六进制数值能用简写的尽量用简写

/* 推荐 */
.box {
  color: #fff;
}

/* 不推荐 */
.box {
  color: #ffffff;
}

不要为 0 指明单位

/* 推荐 */
.box {
  margin: 0 10px;
}

/* 不推荐 */
.box {
  margin: 0px 10px;
}

属性值引号

css属性值需要用到引号时，统一使用单引号

推荐：

.box { 
  font-family: 'Hiragino Sans GB';
}

不推荐：

.box { 
  font-family: "Hiragino Sans GB";
}

属性书写顺序

建议遵循以下顺序：

1. 布局定位属性：display / visibility / float / clear / overflow / position
2. 自身属性：width / height / margin / padding / border / outline
3. 文本属性：font / line-height / text-align / vertical-align / white-space / break-word / color
4. 背景属性：background / opacity
5. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / box-sizing / transform / transition / animation …

.box {
  display: block;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  padding: 20px 0;
  background: rgba(0, 0, 0, .5);
  color: #333;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  border-radius: 10px;
}

CSS3 浏览器私有前缀写法

CSS3 浏览器私有前缀在前，标准前缀在后

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

更多关于浏览器私有前辍写法：#Vendor-specific extensions (opens new window)