美文网首页
CSS 编码规约

CSS 编码规约

作者: 勇往直前888 | 来源:发表于2018-05-10 17:49 被阅读20次

    基本规约

    • 【推荐】缩进使用两个空格
    /* bad */
    .mod-example {
        padding-left: 15px;
    }
    
    /* good */
    .mod-example {
      padding-left: 15px;
    }
    
    • 在每个声明块的左花括号前添加一个空格
    /* bad */
    .mod-example{
      padding-left: 15px;
    }
    
    /* good */
    .mod-example {
      padding-left: 15px;
    }
    
    • 【推荐】声明块的右花括号应当单独成行
    /* bad */
    .mod-example {
      padding-left: 15px;}
    
    /* good */
    .mod-example {
      padding-left: 15px;
    }
    
    • 每条声明语句的 : 后应该插入一个空格,前面无空格
    /* bad */
    .mod-example {
      padding-left:15px;
    }
    
    /* good */
    .mod-example {
      padding-left: 15px;
    }
    
    • 所有声明语句都以分号结尾,不能省略不写
    /* bad */
    .mod-example {
      padding-left: 15px
    }
    
    /* good */
    .mod-example {
      padding-left: 15px;
    }
    

    选择器规约

    • 为选择器分组时,将单独的选择器单独放在一行
    /* bad */
    .selector, .selector-secondary {
      padding-left: 15px;
    }
    
    /* good */
    .selector,
    .selector-secondary {
      padding-left: 15px;
    }
    
    • 为选择器中的属性添加双引号
    /* bad */
    .selector[type=text] {
      padding-left: 15px;
    }
    
    /* good */
    .selector[type="text"] {
      padding-left: 15px;
    }
    
    • 建议选择器层级不要超过5级
    /* bad */
    .main .top .left .mod-a .content .detail {
      padding-left: 15px;
    }
    
    /* good */
    .mod-a .content .detail {
      padding-left: 15px;
    }
    

    属性规约

    • 【推荐】建议相关的属性说明放在一组,并按照下面的顺序排列:
      定位(position、left、right、top、bottom、z-index)
      盒子模型(display、float、width、height、margin、padding、border、border-radius)
      排印(font、color、background、line-height、text-align)

    由于定位可以从正常的文档流中移除元素,并且还能覆盖盒模型相关的样式,因此排在首位。而盒模型决定了组件的尺寸和位置,所以排第二位。排印只是影响元素的细节样式变化,所以放第三位。

    /* bad */
    .mod-example {
      font: normal 13px "Helvetica Neue", sans-serif;
      display: block;
      position: absolute;
      z-index: 100;
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      line-height: 1.5;
      text-align: center;
    }
    
    /* good */
    .mod-example {
      /* 定位 */
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;
      /* 盒模型 */
      display: block;
      float: right;
      width: 100px;
      height: 100px;
      margin: 15px auto;
      padding: 10px 15px;
      border: 1px solid #ccc;
      /* 排印 */
      font: normal 13px "Helvetica Neue", sans-serif;
      line-height: 1.5;
      color: #333;
      background-color: #f5f5f5;
      text-align: center;
    }
    
    • 对于 background 和 font 这两个简写形式的属性声明,要么就显式声明所有的值,要么就不要使用简写形式。
    /* bad */
    .mod-example {
      font: normal 13px;
      background: red;
      background: url(image.jpg);
      }
    
    /* good */
    .element {
      font-style: normal;
      font-size: 13px;
      background-color: red;
      background-image: url(image.jpg);
    }
    
    • 省略 “0” 值后面的单位。不要在 0 值后面使用单位,除非有值
    /* bad */
    .mod-example {
      padding-left: 0px;
    }
    
    /* good */
    .mod-example {
      padding-left: 0;
    }
    
    • 在可能的情况下,使用 3 个字符的十六进制表示法,并始终使用小写的十六进制数字
    /* bad */
    .mod-example {
      color: #cccccc;
      background-color: #efefef;
    }
    
    /* good */
    .mod-example {
      color: #ccc;
      background-color: #efefef;
    }
    
    • 应避免16进制表示法与rgb表示法混用的情况,并优先使用16进制表示法
    /* bad */
    .example-part1 {
      color: #efefef;
    }
    .example-part2 {
      color: rgb(252, 252, 252);
    }
    
    /* good */
    .example-part1 {
      color: #efefef;
    }
    .example-part2 {
      color: #fcfcfc;
    }
    
    • 对于使用到小数的情况,省略前边的 0
    /* bad */
    .mod-example {
      opacity: 0.5;
    }
    
    /* good */
    .mod-example {
      opacity: .5;
    }
    
    • 属性选择器或属性值用双引号 "" 括起来,而 URI 值 url() 不要使用任何引号
    /* bad */
    body {
      font-family: open sans, arial, sans-serif;
      background-image: url('http://taobao.com/');
    }
    
    /* good */
    body {
      font-family: "open sans", arial, sans-serif;
      background-image: url(http://taobao.com/);
    }
    
    • 对于自定义的 font-family 命名,必须使用业务域名前缀作为名字的开始
    /* bad */
    @font-face {
      /* 爱逛街业务自定义字体 */
      font-family: icon-font;
      src: url(//at.alicdn.com/t/font_1426561436_1444216.eot);
    }
    
    @font-face {
      /* 爱逛街业务自定义字体 */
      font-family: guang-iconfont; 
      src: url(//at.alicdn.com/t/font_1426561436_1444216.eot);
    }
    

    媒体查询(Media query)规约

    • 媒体查询建议根据需要采用下面两种组织形式:
      (1)将媒体查询放在尽可能相关规则的附近,不要放在文档底部,否则容易被后来维护的人遗忘
      (2)媒体查询针对每一个种屏幕(大、中、小)的分别单独组织为一个文件
    .element { 
    }
    .element-avatar { 
    }
    .element-selected { 
    }
    
    @media (min-width: 480px) {
      .element {
      }
      .element-avatar {
      }
      .element-selected {
      }
    }
    
    /* base.css */
    .element {
    }
    .element-avatar {
    }
    .element-selected {
    }
    
    /* base-media-small.css */
    @media (min-width: 480px) {
      .element {
      }
      .element-avatar {
      }
      .element-selected {
      }
    }
    

    注释规约

    • 代码是由人来编写和维护的。保证你的代码是描述性的,包含好的注释,并且容易被他人理解。好的代码注释传达上下文和目标。不要简单地重申组件或者 class 名称。
    /* bad */
    
    /* Modal header */
    .modal-header {
    }
    
    /* good */
    
    /* Wrapping element for .modal-title and .modal-close */
    .modal-header {
    }
    
    • 文件注释,即声明在文件头部,描述文件的元信息,表明这个文件的作用是什么
    /**
     * 这个文件的作用是什么,巴拉巴拉
     */
    body {
      color: red;
    }
    

    命名规约

    • 小写字母加连字符(不是下划线,也不是驼峰命名法)
    /* bad */
    .mod_example {
      padding-left: 15px;
    }
    .modExample {
      padding-left: 15px;
    }
    
    /* good */
    .mod-example {
      padding-left: 15px;
    }
    
    • 【建议】需要在 javascript 中使用的类名以 J_ 开头,接“大驼峰”命名。例如 J_ExampleClass, 并且这类的 class 不能出现在 CSS 文件中
    <!-- Bad Html Class for Javascript Hook -->
    <div class="mod-example"></div>
    
    <!-- Good Html Class for Javascript Hook -->
    <div class="J_ExampleClass">Just a Example</div>
    

    相关文章

      网友评论

          本文标题:CSS 编码规约

          本文链接:https://www.haomeiwen.com/subject/adrtdftx.html