CSS Code Guideline

  • 尽可能的通过继承和层叠重用已有的样式

  • 单条CSS规则的书写格式要求

    • 属性要写在一行

    • 需要在 “{” 和 “}” 前后加空格

    • 多个selector各占一行

      .selector1,
      .selector2,
      .selector3 { property:value; }
      
    • 兼容多个浏览器时,将标准属性写在后面

      -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
      
    • 注释的格式

      /* =home-page
      ---------------------------------------------- */
        /* =intro
          ---------------------------------------------- */
        #home-page #intro {
            ...
        }
        /* ------------------------------------------- */
      
        /* =featured articles & popular articles
          ---------------------------------------------- */
        #home-page #featured-articles, #home-page #popular-articles {
            ...
        }
        /* ------------------------------------------- */
      /* ------------------------------------------- */
      
  • ID和Class命名。命名不要用缩写,单词间用”-“做为连接符

    • ID是用来标识具体模块,命名必须具体且唯一,由前缀和名字组成。不要滥用ID。如: #db-video-list

    • Class是用来标识某一类型的元素,命名简洁表意清楚。如:.list

    • 推荐使用的class名

      表示状态 .on, .active, selected, .hili
      表示位置 .first, .last, .main, .side
      表示结构 .hd, .bd, .ft, .col, .section
      通用元素 .tb, .frm, .nav, .list, .item, .tag, .pic, .info
  • 尽量避免使用CSS Hack

    • 推荐使用下面的

      IE6 _property:value
      IE6/7 *property:value
      IE6/7/8/9 property:value9
      非IE6 property//:value
    • 区别规则

      IE6 * html selector { ... }
      IE7 *:first-child+html selector { ... }
      非IE6 html>body selector { ... }
      firefox only @-moz-document url-prefix() { ... }
      saf3+/chrome1+ @media all and (-webkit-min-device-pixel-ratio:0) { ... }
      opera only @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) { ... }
  • 使用`after`或`overflow`的方式清浮动

  • 内联和外联的CSS都必须放在页面的head里。顺序是:全站级CSS,产品级CSS,页面级(外联)CSS,页面级(内联)CSS,内联CSS

  • 避免使用低效的选择器

    例如

    body > * {...}
    ul > li > a {...}
    #footer > h3 {...}
    ul#top_blue_nav {...}
    #searbar span.submit a { ... }
    
  • 尽量避免使用filter

  • 不要直接修改标签的样式

    如: div { ... }

  • 不要在标签上直接写样式

    如: <div style=”margin-bottom:30px;”>

  • 不要在CSS中使用 expression

  • 不要在CSS中使用 @import

  • 不要在CSS中使用 !important

  • 绝对不要在CSS中使用 “*” 选择符