人人FED-CSS编码规范

浏览器特效支持规范

为了页面性能考虑，如果浏览器不支持CSS3相关属性的，则该浏览器的某些特效将不再支持，属性的支持情况如下表所示：

说明：Y为支持，N为不支持。

文件相关规范

• 文件名：必须由小写字母、数字、中划线-组成
• 编码：文件必须用utf-8编码
• 文件引入方式：
  • 外联方式：<link rel="stylesheet" href="…" />
  • 内联方式：<style>...</style>
  • 原则上，不允许在html上直接写样式
  • link和style标签都应该放入head中
  • 类型声明type="text/css"可以忽略

注释规范

文件顶部注释（推荐使用）

/*
* @description: xxxxx中文说明
* @author: zhifu.wang
* @update: zhifu.wang (2012-10-17 18:32)
*/

模块注释（推荐使用）

/* module: module1 by zhifu.wang */
...
/* module: module2 by zhifu.wang */

简单注释

• 单行注释：/* this is a short comment */
• 多行注释：

/*
* this is comment line 1.
* this is comment line 2.
*/

特殊注释（推荐使用）

/* TODO: xxxx by zhifu.wang 2012-10-18 18:32 */
/* BUGFIX: xxxx by zhifu.wang 2012-10-18 18:32 */

长度要求

注释中的每一行长度不超过40个汉字，或者80个英文字符。

排版规范

Tab和空格

• 一个tab设置为四个空格宽度。

单行形式书写风格的排版约束

1. 每一条规则的大括号{前后加空格。
2. 多个selector共用一个样式集，则多个selector必须写成多行形式。
3. 每一条规则结束的大括号}前加空格。
4. 属性名冒号之前不加空格，冒号之后加空格。
5. 每一个属性值后必须添加分号;，并且分号后加空格。

例如：

div.test { width: 100px; height: 200px; }
a:focus,
a:hover { position: relative; right: 1px; }

多行形式书写风格的排版约束

1. 每一条规则的大括号{前添加空格。
2. 多个selector共用一个样式集，则多个selector必须写成多行形式。
3. 每一条规则结束的大括号}必须不规则选择器的第一个字符对齐。
4. 属性名冒号:之前不加空格，冒号之后加空格。
5. 属性值之后添加分号;。

其他规范

使用引号

• 使用单引号，不允许使用双引号。

CSS3属性浏览器前缀

• 如果使用CSS3的属性，且需要加入浏览器前缀，则按照-webkit- / -moz- / -ms- / -o-的顺序进行添加，标准属性写在最后，并且属性名称要对齐。

  示例：

  div.animation-demo {
    -webkit-animation: mymove 5s infinite;
    -moz-animation: mymove 5s infinite;
    -o-animation: mymove 5s infinite;
    animation: mymove 5s infinite;
  }
  

规则书写规范

• 除16进制颜色和字体设置外，CSS文件中的所有的代码都应该小写。

命名规范

1. 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_。
2. 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。
3. 命名注意缩写，但不能盲目缩写。
4. 不允许通过1、2、3等序号进行命名。
5. 避免class与id重名。
6. id 用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建 id
7. class 用于标识某一个类型的对象，命名必须言简意赅。
8. 尽可能提高代码模块的复用，样式尽量用组合的方式
9. 规则名称中丌应该包含颜色（red/blue）、定位（left/right）等不具体显示效
   果相关的信息。应该用意义命名，而丌是样式显示结果命名。

.red{color:red}（错误）
.important-news{color:red}（正确）

10. 禁止直接为 html tag 添加 css 样式设置

div {
width: 200px;
font-size: 16px;
}

11. 每一条规则应该确保选择器唯一，禁止直接为全尿.nav/.header/.body 等类
    设置属性

属性编写顺序

推荐的样式编写顺序如下：

1. 显示属性

   • display
   • list-style
   • position
   • float
   • clear

2. 自身属性（盒模型）

   • width
   • height
   • margin
   • padding
   • border

3. 背景

   • background

4. 行高

   • line-height

5. 文本属性

   • color
   • font
   • text-decoration
   • text-align
   • text-indent
   • vertical-align
   • white-space
   • content

6. 其他

   • cursor
   • z-index
   • zoom

7. CSS3属性

   • transform
   • transition
   • animation
   • box-shadow
   • border-radius

链接的样式顺序

链接的样式请严格按照以下顺序添加：

• a:link
• a:visited
• a:hover
• a:active（LoVeHAte）

性能优化

1. 合并属性

   • 合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。

2. 选择器优化

   • 选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。
   • 避免覆盖全局样式设置。

3. 选择器性能

   • 禁止使用低性能的选择器，如div > * {}、ul > li > a {}、body.profile ul.tabs.nav li a {}。
   • 禁止在CSS中使用*选择符。
   • 如果有class或id的，一般不需要再写上元素对应的tag，例如：div#test { width:100px; }可以简化为#test { width:100px; }。

4. 数值优化

   • 0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px。
   • 如果是16进制表示颜色，则颜色取值应该大写。
   • 颜色尽量用三位字符表示，例如#AABBCC写成#ABC。
   • 如果没有边框时，不要写成border:0，应该写成border:none。

5. 样式合并

   • 在保持代码解耦的前提下，尽量合并重复的样式。

6. 缩写属性

   • background、font等可以缩写的属性，尽量使用缩写形式。

CSS属性取值规范

字体大小（font-size）

• font-size必须以px或pt为单位，推荐用px（注：pt为打印版字体大小设置）。
• 不允许使用xx-small、x-small、small、medium、large、x-large、xx-large等值。

字体系列（font-family）

• font-family不允许在业务代码中随意设置。
• 推荐的font-family取值为：
  • 对于body：font: 12px Tahoma, Verdana, STHeiTi, simsun, sans-serif
  • 对于input、label、select、option、textarea、button、fieldset、legend：font-family: "lucida grande", tahoma, verdana, arial, STHeiTi, simsun, sans-serif

Hack使用规范

重要原则

• 尽量少用hack，能不用hack坚决不用，不允许滥用hack。

区分规则

• IE6

  * html selector { ... }
  

• IE7

  *+html selector { ... }
  

• 非IE6

  html>body selector { ... }
  

• Firefox

  @-moz-document url-prefix() { ... }
  

• Safari 3+/Chrome

  @media screen and (-webkit-min-device-pixel-ratio:0) { ... }
  

• Opera

  @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { ... }
  

• iPhone/Mobile WebKit

  @media screen and (max-device-width: 480px) { ... }
  

区分属性

• IE6

  _property: value;
  

• IE7

  +property: value;
  

• IE6/7

  *property: value;
  

• IE6/7/8/9

  property: value\9;
  

z-index取值规范

人人页面中的弹窗较多，z-index取值随意导致相互覆盖的问题。为了避免这种情况，有必要对z-index取值进行规范和约束。以下是建议的z-index取值区间：

• 头部导航区域：[1999 - 2100]
• publisher所在的内容head区：[1998]
• 页面主要内容区域：[-1 - 1997]
• 页面底部：[1999 - 2100]
• 首页应用弹局：[1000]
• 全站公共组件：[-1 - 1999]
• 全页面蒙局弹窗空间：[10000-11000]

常用的CSS命名

这里列举了一些常用的CSS命名规则，供前端开发人员参考：

其他

字体名称映射

• 字体名称请映射成对应的英文名，例如：黑体(SimHei)、宋体(SimSun)、微软雅黑(Microsoft Yahei)。如果字体名称中有空格，则必须加单引号。

背景图片使用

• 请合理使用CSS Sprites，按照模块、业务、页面来划分均可。
• CSS背景图片的文件类型保存原则：
  • 如果背景图片有动画，则保存成gif。
  • 如果没有动画，也没有半透明效果，则保存成png-8。
  • 如果有半透明效果，则保存成png-24。

清除浮动

• 不要在HTML中加入标签来清理浮动，通过在浮动元素的父元素上添加.clearfix类来清除浮动。

SEO和页面可用性

• 为了SEO和页面可用性，请使用text-indent来隐藏文本内容。

CSS Sprites制作

• 制作CSS Sprites时，尽量把颜色相近的图标放在一起，存储为png8格式，存储完以后还能用一些压缩工具进行无损压缩。

背景图片平铺

• 避免过小的背景图片平铺。

!important使用

• 尽量少用!important。

非一次性expression

• 避免使用非一次性expression。

链接样式顺序

• 链接的样式请严格按照：a:link -> a:visited -> a:hover -> a:active（LoVeHAte）的顺序添加。

参考资料

• 浏览器CSS3特效支持规范: http://www.w3schools.com/cssref/css3_browsersupport.asp
• 常用的css命名: http://www.03964.com/read/bbfd0a70fc1602583e1038d7.html
• Google CSS guidelines: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#CSS_Style_Rules
• 浏览器兼容性问题汇总: http://wiki.d.xiaonei.com/pages/viewpage.action?pageId=16090142
• Mozilla官方推荐CSS书写顺序: http://www.mozilla.org/css/base/content.css
• CSS hack区分Firefox、Opera、Safari、IE: http://leeiio.me/css-hack-for-firefox-opera-safari-ie/
• 说说CSS Hack 和向后兼容: http://sofish.de/1331
• bootstrap.css: http://twitter.github.com/bootstrap/assets/css/bootstrap.css