代码规范

编码

• 样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”
• 字符 @charset “”; 都用小写字母，不能出现转义符，编码名允许大小混写
• 考虑到在使用“UTF-8”编码情况下 BOM 对代码的污染和编码显示的问题，在可控范围下，坚决不使用 BOM。

@charset "UTF-8";

.jdc{}

代码格式化

参考《格式化》一章

代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

.jdc{
    display:block;
}

选择器

• 尽量少用通用选择器 *
• 不使用 ID 选择器
• 不使用无具体语义定义的标签选择器

代码缩进

参考目录《格式化》

代码易读性

参考目录《格式化》

属性值引号

css属性值需要用到引号时，统一使用单引号

属性书写顺序

参考目录《格式化》

CSS3浏览器私有前缀写法

pai骨架项目中，已经通过webpack插件实现自动补充。

注释规范

单行注释

占据一行：

/* Comment Text */
.jdc{}

/* Comment Text */
.jdc{}

模块注释

/* Module A
---------------------------------------------------------------- */
.mod_a {}


/* Module B
---------------------------------------------------------------- */
.mod_b {}

文件信息注释

在样式文件编码声明 @charset 语句下面注明页面名称、作者、创建日期等信息

@charset "UTF-8";
/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */

重置样式

使用以下样式文件：
normalize-8.0.0

BEM 约定

适当使用BEM约定，它是一种前端命名方法论，主要是针对CSS，意思是块（Block）、元素（Element）、修饰符（Modifier）的简写。这种命名方法让CSS便于统一团队开发规范和方便维护。