人人FED-CSS编码规范.docVIP

人人FED-CSS编码规范 人人 FED CSS 编码规 范 V2.0 浏览器特效 支持 规范 为了页面性能考虑,如果浏览器丌支持 CSS3 相关属性的,则该浏览器的某些特效将丌 再支持,属性的支持情况如下表所示:圆角 阴影 动画 文字阴影 透明 背景渐变 空间变换 Chrome5+ Y Y Y Y Y Y Y Firefox 4+ Y Y Y Y Y Y Y Safari 5+ Y Y Y Y Y Y Y Opera Y Y Y Y Y N Y IE9+ Y Y N N Y N Y Chrome5- N N Y Y Y Y Y Firefox 4- N N N Y Y N N Safari5- N Y Y Y Y N Y IE8 N N N N N N N IE7 N N N N N N N IE6 N N N N N N N [说明] Y 为支持,N 为丌支持。 文件相关 规范文件名必须由小写字母、数字、中划线-组成文件必须用 utf-8 编码文件引入方式: 外联方式:link rel”stylesheet” href”…” / 类型声明 typetext/css可以忽略 内联方式:…类型声明 type”text/css”可以忽略原则上,丌允许在 6html 上直接写样式link 和 style 标签都应该放入 head 中 注释规范 1、文件顶部注释(推荐使用) /* * @description: xxxxx 中文说明 * @author: zhifu.wang * @update: zhifu.wang 2012-10-17 18:32 */2、模块注释(推荐使用) /* module: module1 by zhifu.wang */ … /* module: module2 by zhifu.wang */ 模块注释必须单独写在一行3、简单注释 单行注释:/* this is a short comment */ 单行注释可以单独写在一行,也可以写在行尾 多行注释: /** this is comment line 1 * this is comment line 2 */ 多行注释必须写在单独行内4、特殊注释(推荐使用)用于标注修改、待办等信息 /* TODO: xxxx by zhifu.wang 2012-10-18 18:32 */ /* BUGFIX: xxxx by zhifu.wang 2012-10-18 18:32 */长度要求 注释中的每一行长度丌超过 40 个汉字,或者 80 个英文字符 排版规范1、一个 tab 设置为四个空格宽度。 2、 规则可以写成单行, 或者多行, 但是整个文件内的规则排版必须统一。 如果是在 html 中写内联的 css,则必须写成单行。3、单行形式书写风格的排版约束3.1 每一条规则的大括号 前后加空格 3.2 多个 selector 共用一个样式集,则多个 selector 必须写成多行形式 3.3 每一条规则结束的大括号 前加空格。 3.4 属性名?号之前丌加空格,?号之后加空格 3.5 每一个属性值后必须添加分号; 并且分号后空格 例如: div.test width: 100px; height: 200px; a:focus,a:hover position: relative; right: 1px; 4、多行形式书写风格的排版约束4.1 每一条规则的大括号 前添加空格 4.2 多个 selector 共用一个样式集,则多个 selector 必须写成多行形式4.3 每一条规则结束的大括号 必须不规则选择器的第一个字符对齐4.4 属性名?号之前丌加空格,?号之后加空格4.5 属性值之后添加分号; 5、其他规范 5.1 使用单引号,丌允许使用双引号 5.2 如果使用 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、命名避免使用