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）或者是不影响前两组属性，因此排在后面。
只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性，如果属性间存在关联性，则不要隔开写

显示属性	自身属性	文本属性和其他修饰｜
display	width	font
visibility	height	text-align
position	margin	text-decoration
float	padding	vertical-align
clear	border	white-space
list-style	overflow	color
top	min-width	background

/* 这里的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 字重 ，故使用数值描述增加了灵活性，也更简短。

数值	字重
400	normal
700	bold

    /* 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

语义	命名	简写
文档	doc	doc
头部	head	hd
主体	body	bd
尾部	foot	ft
主栏	main	mn
主栏子容器	mainc	mnc
侧栏	side	sd
侧栏子容器	sidec	sdc
盒容器	wrap/box	wrap/box
导航	nav	nav
子导航	subnav	snav
面包屑	crumb	crm
菜单	menu	menu
选项卡	tab	tab
标题区	head/title	hd/tt
内容区	body/content	bd/ct
列表	list	lst
表格	table	tb
表单	form	fm
热点	hot	hot
排行	top	top
登录	login	log
标志	logo	logo
广告会被某些浏览器屏蔽掉	advertise	ad
搜索	search	sch
幻灯	slide	sld
提示	tips	tips
帮助	help	help
新闻	news	news
下载	download	dld
注册	regist	reg
投票	vote	vote
版权	copyright	cprt
结果	result	rst
标题	title	tt
按钮	button	btn
输入	input	ipt

覆盖规则(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百度代码规范
• 常见字体名称参考表

字体	操作系统	Family Name
宋体(中易宋体)	Windows	SimSun
黑体(中易黑体)	Windows	SimHei
微软雅黑	Windows	Microsoft YaHei
微软正黑	Windows	Microsoft JhengHei
华文黑体	Mac/iOS	STHeiti
冬青黑体	Mac/iOS	Hiragino Sans GB
文泉驿正黑	Linux	WenQuanYi Zen Hei
文泉驿微米黑	Linux	WenQuanYi Micro Hei