CSS代码规范

书写格式，按照bootstrap规范：

• [建议]为选择器分组时，将单独的选择器单独放在一行。

• [强制]为了代码的易读性，在每个声明块的左花括号前添加一个空格。

• [建议]声明块的右花括号应当单独成行。

• [建议]每条声明语句的 : 后应该插入一个空格。

• [强制]为了获得更准确的错误报告，每条声明都应该独占一行。

• [强制]所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

• [建议]对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如, box-shadow）。
  不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加 逗号，不加空格）。

• [建议]对于属性值或颜色参数，省略小于 1 的小数前面的 0

  例如，.5 代替 0.5; ``-.5px 代替 -0.5px。

• [建议]十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。

  /* good */
    .success {
        background-color: #aca;
        color: #90ee90;
    }

    /* bad */
    .success {
        background-color: #ACA;
        color: #90EE90;
    }

• [强制]尽量使用简写形式的十六进制值，

  例如，用 #fff 代替 #ffffff。

• [强制]为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。

• [强制]避免为 0 值指定单位。

  例如，用 margin: 0; 代替 margin: 0px;。

/* 推荐 */
.selector {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

声明顺序

• [建议]声明顺序
  1. Positioning
  2. Box model
  3. Typographic
  4. Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性，如果属性间存在关联性，则不要隔开写

/* 这里的height和line-height有关联性 */
.m-box {
  position: relative;
  width: 600px;
  height: 200px;
  line-height:20px;
  margin: 0 auto 10px;
  text-align: center;
  color: #000;
}

• [强制] ad和banner不要用来作为class名，否则容易被一些浏览器作为弹出广告禁掉

选择器

• [强制]不得为 id、class 选择器添加类型选择器进行限定。

在性能和维护性上，都有一定的影响。

  /* good */
    #error,
    .danger-message {
      font-color: #c00;
    }

    /* bad */
    dialog#error,
    p.danger-message {
      font-color: #c00;
    }

• [强制]在可以使用缩写的情况下，使用属性缩写。

  /* good */
    .post {
      font: 12px/1.5 arial, sans-serif;
    }

• [建议]选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

通用

• [强制]清除浮动
  当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。不使用增加空标签的方式。

触发 BFC 的方式很多，常见的有：

float 非 none
position 非 static
overflow 非 visible

如希望使用更小副作用的清除浮动方法，参见 A new micro clearfix hack 一文。
另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。

• [强制]不使用 !important 声明

当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式
必须注意的是，仅在设计上 确实不允许任何其它场景覆盖样式时，才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。

颜色

• [建议]RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。

带有alpha的颜色信息可以使用 rgba()。

• [建议]颜色值可以缩写时，必须使用缩写形式。

  /* good */
    .success {
        background-color: #aca;
    }

• [强制]颜色值不允许使用命名色值。

    /* good */
    .success {
        color: #90ee90;
    }

    /* bad */
    .success {
        color: lightgreen;
    }

字体

• [强制]font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中.

所谓英文 Family Name，为字体文件的一个元数据.

  h1 {
    font-family: "Microsoft YaHei";
  }

• [建议]字体的字号不小于 12px。

在chrome浏览器中支持的最小字体为12px。以及在windows系统中小于12px的字体渲染就会模糊。

• [建议]font-weight 属性必须使用数值方式描述。

CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。
浏览器本身使用一系列 启发式规则 来进行匹配，在 <700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。
但已有浏览器开始支持 =600 时匹配 Semibold 字重 ，故使用数值描述增加了灵活性，也更简短。

    /* good */
    h1 {
        font-weight: 700;
    }

    /* bad */
    h1 {
        font-weight: bold;
    }

• [建议]line-height 在定义文本段落时，应使用数值
• [建议]font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif / sans-serif )。（苹果字体在前，微软字体在后）

优化

• [强制]需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。

如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。

• [强制]禁止使用 Expression。
• [强制]CSS Sprite

CSS Sprite是一种将数个图片合成为一张大图的技术（既可以是背景图也可以是前景图），然后通过偏移来进行图像位置选取；
CSS Sprite可以减少http请求，提高页面访问速度。

常见不可分割的场景为URL超长。

[建议]语义，统一语义理解和命名，简写时省略元音a、e、i、o、u

覆盖规则(CSS 特殊性)

• [建议]模块化分，将某一段具有完整功能的代码划分为模块
• [建议]全局层面不许出现通用性过强的选择器。在各模块节点上加强功能性选择器，在模块内部用通用性选择器搭框架，多个模块共用的选择器用带有语义化的名字标出

将模块节点上的强功能性选择器作为命名空间使用，这种方法在sass的帮助下很容易实现：

性能的问题，以下为总结stackoverfolw上关于css不同写法对浏览器渲染性能的影响问题的回答：
虽然老的浏览器算法中样式匹配是从右到左，但是现代浏览器性能不断提升，内核算法也一直在升级，css的渲染性能越来越强，而且过分考虑选择器、嵌套优化规则，牺牲了代码结构优雅性和可维护性，是得不偿失的。

<!-- 推荐 -->
-- html --
<div class="form-comp login-form-comp">
    <form action="">
        <div class="item">
            <span class="label">用户名</span>
            <input class="ipt-lg" name="user_name" type="text">
        </div>
        <div class="item">
            <span class="label">密码</span>
            <input name="user_pwd" type="password">
        </div>
        <input class="submit" id="submitBtn" type="submit">
    </form>
</div>
<div class="form-comp regist-form-comp">
    <form action="">
        <div class="item">
            <span class="label">用户名</span>
            <input name="user_name" type="text">
        </div>
        <div class="item">
            <span class="label">密码</span>
            <input name="user_pwd" type="password">
        </div>
        <div class="item">
            <span class="label">确认密码</span>
            <input class="heighlight" name="re_user_pwd" type="password">
        </div>
        <input class="submit" id="registSubmitBtn" type="submit">
    </form>
</div>

其它

参考

• bootstrap代码规范
• fex-team百度代码规范
• 常见字体名称参考表