CSS编码规则

目的：改善协作编码、代码质量。

忽略协议

忽略资源（图片及其他多媒体、样式表）URL的协议部分（http:, https:），变绝对URL为相对URL，好处：

解耦资源依赖协议类型
文件变小

/* 不推荐 */
.class {
  background: url(http://www.url.com/images/example.jpg);
}
/* 推荐 */
.class {
  background: url(//www.url.com/images/example.jpg);
}
/* 不推荐 */
@import url(http://www.google.com/css/maia.css);
/* 推荐 */
@import url(//www.google.com/css/maia.css);

缩进

使用2个空格，不使用tab

.class {
  color: blue;
}

大小写

全部使用小写，适用于HTML元素名、属性名、属性值，CSS选择器名、属性名、属性值；

/* 不推荐 */
color: #E5E5E5;
/* 推荐 */
color: #e5e5e5;

尾随空格

删除尾随空格，因为是不需要的，而且会在做diff的时候，使diff结果复杂化。

/* 不推荐 */
color: #E5E5E5;__
/* 推荐 */
color: #e5e5e5;

编码

文件字符编码采用UTF-8(no BOM)
不要指定CSS编码方式，因为默认就是UTF-8

CSS合法性

CSS合法性测试工具：W3C CSS validator

ID和class命名

ID和class命名要有通熟易懂的含义，ID的命名要具体化，class的命名要通用抽象化；

/* 不推荐: 无意义 */
#yee-1901 {}
/* 不推荐: 与样式相关 */
.button-green {}
.clear {}

/* 推荐: 特殊性 */
#gallery {}
#login {}
.video {}

/* 推荐: 通用性 */
.aux {}
.alt {}

命名空间(前缀)

ID和class前加唯一的、有意义的前缀（用连接符连接），在大型项目中，可以防止命名冲突，增加可维护性（方便查找替换）。

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

命名单词连接符

命名单词间用连字符（- hyphen）连接，不要使用下划线（_ underscore）

/* 不推荐: 没有分离单词demo和image */
.demoimage {}
/* 不推荐: 应使用连字符代替下划线 */
.error_status {}
/* 推荐 */
#video-id {}
.ads-sample {}

选择器

不要使用如下选择器：元素名+ID名、元素名+class名。

避免使用祖先选择器，会影响性能。

/* 不推荐 */
ul#example {}
div.error {}
/* 推荐 */
#example {}
.error {}

属性简写

尽量使用属性简写，即使只有一个属性值需要表达的情况。可提高代码效率和可读性。

/* 不推荐 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0与单位

属性值0后面省略单位。

margin: 0;
padding: 0;

0与小数点

-1至1之间的小数点前的0省略。

font-size: .8em;

URL中的引号

URL中的引号省略。

@import url(//www.google.com/css/go.css);

十六进制表示

尽量使用3字符十六进制表示。

/* 不推荐 */
color: #eebbcc;
/* 推荐 */
color: #ebc;

hacks

请不用动不动就使用浏览器检测和CSS Hacks，先试试别的解决方法吧！考虑到代码高效率和易管理，虽然这两种方法能快速解决浏览器解析差异，但应被视为最后的手段。在长期的项目中，允许使用hack只会带来更多的hack，你越是使用它，你越是会依赖它！

属性声明顺序

按照定位、盒模型、其他规则的顺序来写，可提升浏览器渲染dom的性能。

私有属性：-moz-在-webkit-前面；

.hotel-content {
  /* 定位 */
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  /* 盒模型 */
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
  background: #eee;
  /* 内容 */
  color: #efefef;
  font: 15px arial, sans-serif;
  line-height: 50px;
  letter-spacing: 0.5em;
  /* 其他 */
  animation: mymove 5s infinite;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
 }

块内容缩进

块内容2空格缩进，利于反应结构，提高可读性。

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

声明结束符

声明最后都应带有封号，基于一致性、可扩展性原则。

/* 不推荐 */
.test {
  display: block;
  height: 100px
}
/* 推荐 */
.test {
  display: block;
  height: 100px;
}

属性名结束符

属性名后（即冒号后）应带有1个空格，基于一致性原则。

/* 不推荐 */
h3 {
  font-weight:bold;
}
/* 推荐 */
h3 {
  font-weight: bold;
}

声明块分离

最后一个选择器和声明块之间用1个空格相分离，且最后一个选择器和声明块的第一个大括号在同一行上。

/* 不推荐: 没有空格 */
#video{
  margin-top: 1em;
}

/* 不推荐: 不必要的换行符 */
#video
{
  margin-top: 1em;
}
/* 推荐 */
#video {
  margin-top: 1em;
}

选择器和声明分离

选择器和声明应各占一行，多个选择器的情况每个选择器独占一行。

/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}
/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

规则分离

规则使用换行符（new line）分离。

/* 不推荐 */
html {
  background: #fff; color: #ddd;
}
/* 推荐 */
body {
  margin: auto;
  width: 50%;
}

引号

使用单引号，而非双引号。

/* 不推荐 */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* 推荐 */
@import url(//www.google.com/css/maia.css);

a[href^='https'] {
  font-family: 'open sans', arial, sans-serif;
}

区块注释

按模块来分组CSS，并给每个分组添加注释。

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

参考引用

随机推荐

CSS编码规则
CSS编码规则目的：改善协作编码、代码质量。忽略协议忽略资源（图片及其他多媒体、样式表）URL的协议部分（http:, https:），变绝对URL为相对URL，好处：解耦资源依赖协议类型

技术文档网

CSS编码规则