CSS代码规范

语言规范

  1. 样式文件中不要出现大写的标签定义, 不要对 JS 钩子进行样式定义。

  2. 避免出现.a.b之类的定义, 如果做hack使用请注明。 ( ie6 不支持此定义 )

  3. 稀奇古怪的hack请加注释。

  4. 避免使用!important, 如果必须请加注释。

  5. 缩进以4个空格为基本单位[参考]。

  6. 样式使用竖排, 不要使用横排以及 n 级缩进等。

  7. 对于所有hack请放到每个样式定义的最后边。

  8. class selector 层级尽量控制在 5 层以内。

  9. 严格控制 important 关健字的使用场景，尽量少用。

CSS 命名规则

  1. 样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写 字母（a-z）、数字（0-9）、中划线 （-）组成。

  2. 可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义 化。避免使用 123456…,red,blue,left,right之类的（如颜色、字号大小等）矢量命名 ，如class="left-news"、class="2" ，以避免当状态改变时名称失去意义。尽量用单个 单词简单描述class名称。

  3. 双单词或多单词组合方式：形容词-名词、命名空间-名次、命名空间-形容词-名词。例如： news-list、mod-feeds、mod-my-feeds、cell-title

通用命名

  1. 页面框架命名，一般具有唯一性，推荐用ID命名

    ID名称|命名|ID名称 |命名 :———————-|:———————-|:———————-|:———————- 头部|header|主体| main 脚部|footer|容器|wrapper 侧栏|sidebar|栏目|column 布局|layout||

  2. 模块结构命名

    Class名称|命名|Class名称|命名 :———————-|:———————-|:———————-|:———————- 模块(如：新闻模块) |mod (mod-news) |标题栏 |title 内容 |content |次级内容 |sub-content

  3. 导航结构命名

    Class名称|命名|Class名称|命名 :———————-|:———————-|:———————-|:———————- 导航 |nav |主导航 |main-nav 子导航| sub-nav |顶部导航 |top-nav 菜单 |menu |子菜单 |sub-menu

  4. 一般元素命名

    Class名称|命名|Class名称|命名 :———————-|:———————-|:———————-|:———————- 二级| sub |面包屑| breadcrumb 标志 |logo |广告 |bner(禁用banner或ad) 登陆 |login |注册 |register/reg 搜索 |search |加入 |join 状态 |status |按钮 |btn 滚动 |scroll |标签页 |tab 文章列表 |list| 短消息| msg/message 当前的 |current |提示小技巧 |tips 图标 |icon| 注释| note 指南 |guide |服务 |service 热点 |hot |新闻 |news 下载 |download |投票 |vote 合作伙伴 |partner |友情链接 |link 版权| copyright| 演示| demo 下拉框 |select |摘要 |summary 翻页 |pages| 主题风格| themes 设置 |set |成功| suc 按钮 |btn| 文本| txt 颜色 |color/c| 背景 |bg 边框 |border/bor| 居中| center 上 |top/t |下| bottom/b 左 |left/l |右 |right/r 添加 |add |删除 |del 间隔 |sp| 段落 |p 弹出层 |pop |公共 |global/gb 操作| op |密码 |pwd 透明 |tran| 信息 |info 重点 |hit |预览 |pvw 单行输入框| input| 首页 |index 日志 |blog |相册| photo 留言板 |guestbook| 用户| user 确认 |confirm |取消 |cancel 报错 |error||

  5. 全局皮肤样式

    文字颜色(命名空间text-xxx)

    1. text-c1, text-c2,text-c3……

    背景颜色(命名空间bg -xxx)

    1. bg-c1,bg-c2,bg-c3……

    边框颜色(命名空间border-xxx)

    1. border-c1,border-c2,border-c3……

属性使用

  1. z-index

    1. //右侧导航: 100-109 
    2. //弹窗: 110-119 
    3. //顶部: 90-99 
    4. //搜索: 80-89 
    5. //导航: 70-79 
    6. //主内容: 50-59 
    7. //底部: 40-49

  2. css属性使用缩写。

    (╳)

    1. padding-top: 1px;
    2. padding-right: 2px;
    3. padding-bottom: 3px;
    4. padding-left: 4px;

    (√)

    1. padding: 1px 2px 3px 4px;

  3. 0不带单位 (动画0%除外)。

    (√)

    1. margin: 0;
    2. font-size: 0;

    (╳)

    1. margin: 0px;  
    2. font-size: 0px;

  4. 使用简写的十六进制值。

    (√)

    1. color: #edf;

    (╳)

    1. color: #eeddff;

  5. border以 width, style, color 的顺序书写, width单位使用 px/rem, 例如:

    1. border: 1px solid #000;  
    2. border-top: 1px solide #000;  
    3. border-top-color: red;  
    4. border: 0;

  6. background:以color, image, repeat, position的顺序来书写, url省略引号, 例如:

    1. background:#003 url(http://www.taobao.com/loading.png) no-repeat 0 0;
    2. background-color:red;

  7. 尽量不使用 CSS expression, 大量使用时性能较差, 应尽量避免使用。

  8. CSS属性书写顺序参考:

    1. 位置属性(position, top, right, z-index, display, float等)
    2. 大小(width, height, padding, margin)
    3. 文字系列(font, line-height, letter-spacing, color- text-align等)
    4. 背景(background, border等)
    5. 其他(animation, transition等)
    6. display
    7. float
    8. position
    9. z-index
    10. width
    11. height
    12. overflow
    13. left(right)
    14. top(bottom)
    15. text-xxx
    16. font-xxx
    17. color
    18. border
    19. background
    20. cursor

  9. 为了节省图片的开销，有时候小三角形可以用css border来生成, 看看本规范里面小三角按钮[参考]:

注释规范

  1. 文件头注释:

    1. /**
    2. * Style for module header.
    3. * @author djune
    4. * @version 1.0.0 build 2010-12-8
    5. * @modified xxx 2011-2-18
    6. */

  2. 对于html模块需要加注释。

  3. 奇葩点的 hack 要加注释。

    1. background-color: transparent; /* flexible background gradient */
    2. font-family: serif; /* text floating bug in ie6 */

  4. 修改别人的 CSS 请添加注释

    1. /* 主要修改IE8浏览器兼容性问题 djune 2013-09-26 13:21 */

CSS Module (模块定义)

通常我们的页面模块html结构可以写成这样(.hd, .bd, .ft):

通过语义化含义判断我们的结构具体怎么分配到这三个基本结构。

html:

  1. ```html
  2. <div id="mod-xxx" class="mod-xxx">
  3.   <div class="hd">Module Title</div>
  4.   <div class="bd">
  5.      Module body inner html constructs
  6.   </div>
  7.   <div class="ft">just a footer</div>
  8. </div>
  9. ```

scss

  1. ```css
  2. .mod-xxx {
  3.   border: 1px solid #ccc;
  4.   .hd { font-weight: bold; }
  5.   .bd { paddinig: 3px; }
  6.   .ft { margin-botto: 3px; }
  7. }
  8. ```

css:

  1. ```css
  2. .mod-xxx { border: 1px solid #ccc; }
  3. .mod-xxx .hd { font-weight: bold; }
  4. .mod-xxx .bd { paddinig: 3px; }
  5. .mod-xxx .ft { margin-botto: 3px; }
  6. ```

其他

  1. sass 预编译, compass 用法
  2. 合理运用sprites技术，注意png8和png24图片格式化的使用。[参考]。