前言

本文就css代码规范进行简单的整理，不完善以及不正确之处欢迎大家批评指正。

选择器

  • 选择器命名
    选择器命名，class命名时选择语义化的，不建议使用直接样式效果，比如.red,.fontBold，另外整体的样式文件中命名建议使用统一的规则，或者驼峰式，或者中划线分割，命名注意缩写，避免与id重名，不建议通过1 2 3等序号命名。关于命名规则以及常见类名可以本站搜索相关文章
  • 选择器选择原则
    基本的选择器中，尽量使用类选择器；复杂选择器中，尽量少使用层次、属性的相关选择器。
  • 样式重用
    样式重复可以一定程度的避免，用类样式来提炼公共样式，建议多用样式的预处理，比如less。基本使用类选择器实现重用最简单实用。
  • 合理的避免id的使用
    原因有二：一个是id修饰权重比较高，不容易被class修改重定义；第二个，id一般被用来定义特定模块的。如果该模块是可重用的，或者不具有特殊意义的不建议使用。
  • 筛选出同时具有
    中间没有任何间隔，与群组选择器，后代选择器区分开
  • 非主流选择器
    主要包括：伪类选择器，结构选择器，伪元素，属性选择器，语言选择器等。可以本站搜索选择器攻略查看所有的选择器分类以及使用。基于兼容性考虑，建议大家慎用。

  • 选择器层级
    层级关系确定在3层以内，去除不必要的层级关系，简化dom结构或者样式组件结构。

    样式分类

  • 全局样式
    顾名思义，没有任何限制条件的样式，可以任何位置使用并达到其显示效果。如果可能有样式代码冲突的，建议写在样式组合中最后。定义全局样式的时候，注意样式污染的问题。一般建议用.c-来区分。

  • 布局样式
    一般用于页面布局，我们经常会把页面布局和模块混合起来，或者根本就不区分。这实际是因为我们对样式理解不够深刻。实际。从视图分析，很多模块在宽高以及整体布局上都是基于整体布局的。而一些整体布局又是可以重用的，所以这部分建议单独分出来，提高开发效率。一般建议用.g-来区分。
  • 模块样式
    以模块的思维去写样式代码，按照层级关系依次展开样式，保证模块清晰同时使得一些样式名称可复用，比如title,price等。其中模块样式顶级也可以理解为命名空间，模块子样式可以追加模块样式前缀，比如header-nav。模块样式是样式代码中占据比例最多的部分，针对具体样式，希望既能做到针对业务，又能提炼出可复用、耦合度低的优质模块。一般建议用.m-来区分。
  • 组件样式
    页面中总有一部分常规组件是我们经常用的，定义好他们对我们开发工作有事半功倍的效果。这些组件常见的有，按钮，单选框，多选框，下拉框，时间选择控件等。一般建议用.u-来区分。
  • 功能样式（交互样式）
    有些页面中的元素是有额外的含义的，涉及到这类样式时，有时有特定的交互，或者功能，或者内容，我们针对这部分定义为功能样式，比如删除，查看详情，增加，搜索，这些在涉及具体功能时追加的效果，我们会写在功能样式中。一般建议用.f-来区分。

  • 皮肤样式
    任何一个网站或者页面都有其布局思想，在这个整体的布局当中，颜色自然是不可缺少的，针对主色，交互色，响应颜色，配色等，我们都会把这一类归到皮肤样式中。一般建议用.s-来区分。

    样式优化

  • 合理利用继承和默认

  1. 可继承的样式如果是正确的，不用重写；如果是不对的，纠正；
  2. 任何样式都有默认值。或者是继承来的默认值，针对默认值要清楚，决定是否调整
  • 抽离公共样式
    代码中有超过2个类超过3行以上公用代码，建议抽离公共样式到公共区或者提炼公共样式
  • 复合属性缩写
    比如font,border,margin,padding,background等
  • 减少层级关系
    层级关系越多，代码量越大，同时访问越慢
  • 使用高效能的选择器
    多使用class选择器，css的查询顺序为从右向左，所以最后一个选择器基本决定了你第一次匹配得到的整体数量。
  • 重绘与重排
    影响标签显示样式的叫重绘；影响标签大小-盒模型，位置关系的称为重排。尽量减少这两种，如果有需要，优先选择用重绘代替重排。
  • 待补充

    书写规范

  1. 规则完成一组之后换行，
  2. 选择器开始语法之前大括号前面加空格。
  3. 只有单行样式时放一行，两行以上每行样式一行，每一行添加分号，最后一行也加。
  4. 每个样式属性值前添加空格而属性名之后不加空格。
  5. 数值为0的不用加单位，数值小于1的前面的0可以省略。
  6. 没有边框的时候写border:none
  7. 减少使用低性能的选择器，比如标签，*，多层
  8. 除了颜色以及字体外，所有的代码小写，如果有引号使用单引号
  9. 字体名称请映射成对应的英文名
  10. 背景图片请合理使用csssprites，按照模块、业务、页面来划分均可
  11. css背景图片的文件类型，请按照以下原则来保存:如果背景图片有动画，则保存成gif,如果没有动画，也没有半透明效果，则保存成png-8,如果有半透明效果，则保存成png-24
  12. 清除浮动采用样式，不使用增加空标签的方式
  13. 避免过小的背景图片平铺
  14. 减少使用important

  15. 待补充…

    编写顺序

  16. 显示属性
    display/list-style/position/float/clear

  17. 盒子模型
    width/height/margin/padding/border
  18. 背景
    background
  19. 行高 文本属性其他
    line-height,color/font/text-decoration/text-align/,
    text-indent/vertical-align/white-space/content,
    cursor/z-index/zoom
  20. css3属性
    transform/transition/animation/box-shadow/border-radius
  21. 链接的样式请严格按照如下顺序添加
    a:link -> a:visited -> a:hover -> a:active

    注释规范

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

  • 文件顶部注释 ```css /*
  • @description: xxxxx中文说明
  • @author: zhifu.wang
  • @update: zhifu.wang (2012-10-17 18:32) */ ```

  • 模块注释，模块注释必须单独写在一行

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

  • 单行注释，单行注释可以写在单独一行，也可以写在行尾

    1. /* this is a short comment */

  • 多行注释 :多行注释必须写在单独行内 ```css /*

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

  • 特殊注释 :用于标注修改、待办等信息

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

    浏览器hack

  • 浏览器的hack ：能少用就少用hack ,浏览器的hack如下，注意按照一定的顺序书写：
    -webkit-,-moz-,-o-,-ms-,通用的，针对ie不同版本的，归纳如下：

    1. IE6        _property: value
    2. IE7        +property: value
    3. IE6/7        *property: value
    4. IE6/7/8/9        property: value\9

    其他

  • 网易nec代码规范说明

  • 阿里前端九部css代码规范链接