CSS规范

CSS风格指南

基本原则

• 设置命名空间，文件名以固定字符开头。例如：公司或项目名称的简写
• 关注分离，将HTML、CSS解耦；模块化编码。
• 代码有效性， 尽量标准定义的、有效的 CSS 代码 。最终的结果应该能通过 CSS 校验器校验（具体项目中视目标平台而定，但不盲目追求通过代码校验）。

命名规范

• 只允许使用的小写字母、连字符、数字，不要使用下划线、驼峰命名；.errorStatus {} /* 使用驼峰式命名 */ .demoimage {} /* 没有分割 demo 和 image */ .error_status {} /* 使用下划线链接 */
• 应该从 ID 和 Class 的名字上就能看出这元素是干嘛用的（角色、功能、状态），而不是表象（颜色、位置等）或模糊不清的命名；
• ID和Class命名尽量简短，但应注意保留可读、可辨识性；
• 元素在页面中仅仅出现一次的，应该使用 ID，否则使用 Class。
• 避免元素选择器和 ID、Class 叠加使用；ul#example {} /*不推荐*/
• 使用属性简写，使用简写可以提高代码执行效率和易读性。过度使用简写形式会对属性值带来不必要的覆盖从而引起意外的副作用。常见的滥用简写属性声明的情况如下：

padding
margin
font
background
border
border-radius

• 属性值为 0 时省略单位，例如：margin: 0;

CSS代码格式

• 字体名称请映射成对应的英文名，例如：黑体(SimHei) 、宋体(SimSun) 、微软雅黑(Microsoft Yahei)。如果字体名称中有空格，则必须加引号。
• 链接的样式请严格按照如下顺序添加：
  a:link -> a:visited -> a:hover -> a:active（LoVeHAte）
• 属性声明顺序，推荐的样式编写顺序：
  1. Positioning
  2. Box model
  3. Typographic
  4. Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。

.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 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

模块化

• 语义的模块名，通过模块名应该能一眼看出模块的用途。如 ty-tab、ty-nav，不要使用 red、left 等表象的词命名。
• 模块状态 ：{命名空间}-{模块名}-{状态描述}，常用状态有：hover, current, selected, disabled, focus, blur, checked, success, error 等。
• 子模块：{命名空间}-{模块名}-{子模块名}，常用模块名有：bd(body)，cnt(content)，hd(header)，text(txt)，img(images/pic)，title，item，cell 等， 词义表达组件要实现的功能。
• 模块内部的类名继承自父级，

例如：

 <div class="ty-box">
   <h2 class="ty-box-hd">About the Site</h2>
   <p class="ty-box-bd">This is my blog </p>
</div>

以上代码中ty-box-hd为{命名空间}-{模块名}-{子模块}。

• 充分考虑结构的语义
  是段落就用<p>,是标题就用<h1/>~<h6/>,是引用就用<blockquote>，而不是简单粗暴的使用<div>和<span>。

• 避免不必要的 CSS 选择符嵌套。
  Class 已经模块化命名，从类名上已经可以清晰的分辨元素的从属，一般情况下也不会造成类名冲突，没有必要再进行选择器嵌套，保持 css 结构清晰，提高渲染效率。