CSS 开发规范

一. 规范概述

规范是明文规定或约定俗成的标准，规范的制定，表明我们选择一种标准来完成某些事情，这个标准可能更好、更快、更简单等等。而CSS规范的制定，目的在于： ​

• 形成固定的代码风格
• 选择合适的CSS解决方案 ​
• 提高协同开发的便捷性​​​​​​

二. CSS书写规范

格式与排版

• 缩进

  使用4个空格代替tab来进行缩进，类似Atom的编辑器可以设置。以保证在所有环境下获得一致展现。

• 小写

  所有的样式及规则必须小写。统一使用小写易于识别。

• 空格

  • 删除行尾空格
    
  • 选择器与大括号{之间保留一个空格
  • 声明语句的:后保留一个空格
  • 逗号,之后保留一个空格

• 换行

  • 所有规则需要换行
  • 多组选择器之间需要换行

• 分号

  每条规则结束后都必须加上分号;。

/* bad css */
.selector, .selector-secondary, .selector[type=text]{
    padding:15px;margin:0px 0px 15px;background-color:rgba(0, 0, 0, 0.5)
}

/* good css */
.selector,
.selector-secondary,
.selector[type="text"] {
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.5);
}

格式与编排的规范主要是统一代码风格，提高代码易读性。

属性与值

• 属性顺序

  相关的属性声明应该归组，并按照合适的顺序排列。完整顺序参考：Recess

  • Positioning
    位置，​position, top, right, z-index等。
    
  • Box-model
    盒模型，display,float,width,height等。
  • Typography & Visual
    排版与视效，​font,line-height,text-align等。
  • Misc
    其他，opacity,animation, transition等。

  .declaration-order {
      /* Positioning */
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;
  
      /* Box-model */
      display: block;
      float: right;
      width: 100px;
      height: 100px;
  
      /* Typography & Visual*/
      font: normal 13px "Helvetica Neue", sans-serif;
      line-height: 1.5;
      color: #333;
      text-align: center;
      background-color: #f5f5f5;
      border: 1px solid #e5e5e5;
      border-radius: 3px;
  
      /* Misc */
      opacity: 1;
  }

• 私有属性

  私有属性在前标准属性在后。 带私有前缀的属性由长到短排列。​

  • -webkit-
  • -moz-
  • -ms-
  • -o-
  • -khtml-
    基本都没有用了，被-webkit-取代。

  /* Prefixed properties */
  .selector {
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
      -ms-box-shadow: 0 1px 2px rgba(0,0,0,.15);
      -o-box-shadow: 0 1px 2px rgba(0,0,0,.15);
      box-shadow: 0 1px 2px rgba(0,0,0,.15);
  }

  如何快速添加 Vendor prefixes
  使用 Emmet 可以简写上诉代码为 -wmso-bxsd。

  • w: webkit
  • m: moz
  • s: ms
  • o: o

• 属性简写
  在需要显示地设置所有值的情况下，应当尽量使用简写形式的属性声明。
  CSS简写属性有：

  • background

    /* example */
    .selector {
        background: #f00 url(example.jpg) no-repeat center top;
    }

  • font

    /* example */
    .selector {
        font: italic bold .8em/1.2 Arial, sans-serif;
    }

  • margin

    /* example */
    .selector {
        margin: 0 auto;
    }

  • padding

    /* example */
    .selector {
        padding: 10px 20px 5px;
    }

  • border
    • border-top
    • border-right
    • border-bottom
    • border-left
    • border-width
    • border-color
    • border-style

    /* example */
    .selector {
        border: 1px solid #000;
    }

  • border-radius

    /* example */
    .selector {
        border-radius: 3px 3px 0 0;
    }

  • transition
  • transform

  • list-style

    参考文档：Shorthand properties

• 属性值分组

  对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。

  /* example */
  .selector {
      background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0.04, rgb(88,94,124)),
          color-stop(0.52, rgb(115,123,162))
      );
  }

• 数字

  • 0
    如果属性值为0，则不需要为0加单位。

    /* bad css */
    .selector {
        padding: 0px 20px;
    }
    /* good css */
    .selector {
        padding: 0 20px;
    }

  • 小数
    如果是0开始的小数，前面的0可以省略不写。

    /* bad css */
    .selector {
        width: 0.4rem;
        margin-top: -0.1rem;
    }
    /* good css */
    .selector {
        width：.4rem;
        margin-top: -.1rem;
    }

• 引用

  不要在url()里对引用资源加引号。

  /* bad css */
  .selector {
      background:url("example.jpg") ;
  }
  /* good css */
  .selector {
      background:url(example.jpg) ;
  }

• 文本

  文本内容必须用双引号包围。文本类型的内容可能在选择器、属性值等内容中。

  /* bad css */
  html[lang|=zh] q:before {
      font-family: 'Microsoft YaHei', sans-serif;
      content: '“';
  }
  
  /* good css */
  html[lang|="zh"] q:before {
      font-family: "Microsoft YaHei", sans-serif;
      content: "“";
  }

• 颜色

  RGB颜色值必须使用十六进制记号形式。将所有的颜色值小写。可以缩写的缩写至3位。

  /* bad css */
  .selector {
      background: rgb(255, 0, 0) ;
      color: #00FF00;
  }
  /* good css */
  .selector {
      background: #f00 ;
      color: #0f0;
  }

三. CSS命名规范

组成

• 单词组合

  避免使用拼音。
  不依据表现形式来命名。
  根据内容来命名。
  根据功能来命名。​
  使用业界熟知的或者约定俗成的。
  避免选择器命名过长时可选择使用缩写，保证缩写后还能较为清晰保持原单词所能表述的意思。

  /* bad css name */
  .left, .right, .center, .red, .black
  
  /* good css name */
  .nav, .aside, .news, .type, .search
  

  常用命名：
  • 结构
    • 外壳：wrapper (wrap)
    • 头：header (hd)
    • 内容：content / container (cont)
    • 尾：footer (ft)
    • 导航：navigation (nav)
    • 侧栏：sidebar
    • 栏目：column
    • 页面主体：main
    • 子导航：subnav
    • 菜单：menu
    • 子菜单：submenu
    • 列表：list
  • 功能
    • 登录条：loginbar (login)
    • 热点：hot
    • 下载：download
    • 搜索：search
    • 滚动：scroll
    • 加入：joinus
    • 指南：guide
    • 服务：service
    • 注册：regsiter
    • 状态：status
    • 投票：vote
    • 合作伙伴：partner
  • 内容
    • 标志：logo
    • 广告：banner
    • 新闻：news
    • 友情链接：friendlink
    • 版权：copyright
    • 标签：tags
    • 小技巧：tips
    • 提示信息：msg
    • 栏目标题：title

• 中划线

  输入的时候少按一个shift键。
  浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）。
  能良好区分JavaScript变量命名（JS变量命名是用_）。

• 数字

前缀

CSS选择器使用前缀能够较好的控制样式在项目间的影响。

• g-

  全局通用样式命名，前缀g全称为global，一旦修改将影响全站样式​。

• m-

  模块命名方式。

• ui-

  组件命名方式。

• js-

  所有用于纯交互的命名，不涉及任何样式规则。JSer拥有全部定义权限。

四. CSS其他规范

目录

• styles

  • lib
    基础库
    • core
      Reset、全局设置、全局方法、全局​​​函数、全局变量​。
    • element
      元素样式。
    • widget
      公用组件。
    • layout
      全局布局。
    • ani
      公用动效。
    • font
      公用字体。
  • usage
    具体实现。
    • project
      项目名
      • core
        桥接lib中的core，进行项目级扩展，制定项目样式默认尺寸、颜色等​。
      • widget
        项目组件，扩展于lib中widget。
      • module
        项目模块。
      • page
        页面特殊样式。
      • theme
        主题。
      • mend
        补丁。
      • export
        样式打包输出。

文件

• 命名

  • 模块样式的文件名应与模块名保持一致
  • 页面样式的文件名应与页面名保持一致

• 协议

  省略图像、媒体文件、样式表和脚本等URL协议头部声明(http:,https:)。如果不是这两个声明的URL则不省略。

• 引用

  一般情况下，在页面中只允许使用<link />标签来引用CSS文件。
  避免在页面中使用<style>块。
  避免在<style>块中使用 @import。
  避免使用style属性写行内样式。​

编码

以UTF-8无BOM编码作为文件格式。
HTML中文档中用 <meta charset="utf-8" /> 来指定编码。
CSS文档显示的定义编码，在文档首行定义 @charset "utf-8"​​。
统一编码，避免编译错误​。

模块化

每个模块对应同名文件，模块样式以模块名开头，子节点继承模块名开头，孙节点无需再带模块名。

.m-detail {
    background: #fff;
    color: #333;
}
.m-detail-hd {
    padding: 5px 10px;
    background: #eee;
}
.m-detail-hd .title {
    background: #eee;
}

选择器

重构工程师只允许使用class。
择器的嵌套层级尽量不大于3级。
避免使用低效率选择器。具体详见：CSS选择器。

注释

尽可能的为代码添加注释，CSS注释可以区分样式模块、解释作用、问题描述。

• 文件注释

  /**
   * @​Description: 中文说明 ​
   * @Author: name ​
   * @Update: name (2013-04-13 18:32) ​
   */

• 普通注释

  /* 普通注释 */

• 模块注释

  /**
  * Module: m-detail
  * ​Description: 中文说明
  */

• 特殊注释

  /* TODO: xxxx by name 2013-04-13 18:32 */
  /* BUGFIX: xxxx by name 2012-04-13 18:32 */

• 区块注释

  /* Header */
  ​/* Footer */
  ​/* Gallery */

Hack

尽避免使用Hack，如果一定要使用，可以使用以下方式：

• 属性与值

  • \9
    For all IE
  • \0
    For IE8 and later, Opera without Webkit
  • \9\0
    For IE8 and later
  • \0/
    For IE8 and later
  • *
    For IE7 and earlier
  • _
    For IE6 and earlier

  .test {
  　　　color: #000;    
  　　　color: #111\9;  
  　　　color: #222\0;  
  　　　color: #333\9\0;
  　　　color: #444\0/;
  　　　*color: #666;   
  　　　_color: #777;   
  }

• 条件注释

  <!--[if <keywords>? IE <version>?]>
  <link rel="stylesheet" href="*.css" />
  <![endif]-->

  • 空：指定是否IE或IE某个版本
  • gt(greater than): 大于IE某个版本
  • gte(greater than or equal to): 大于等于IE某个版本
  • lt(less than): 小于IE某个版本
  • gt(less than or equal to): 小于IE某个版本

图像

• 压缩

  所有图片必须经过一定的压缩和优化才能发布。
  在线压缩：online image optimizer

• 格式

  不透明图像使用JPEG。
  ​透明图像使用PNG。
  需要兼容IE6时，使用PNG8​。

• 合成

  使用CSS Sprite减少http请求。

五.总结

附

参考文档

• [1].​https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Syntax
• [2].https://github.com/doyoe/html-css-guide​
• [3].http://www.cnblogs.com/whitewolf/p/4491707.html​
• [4].​http://www.jb51.net/css/141575.html​
• [5].https://segmentfault.com/a/1190000002460968#articleHeader12​

转载于:https://www.cnblogs.com/ciimoo/articles/6270715.html