CSS编程规范

一、排版

排版一般有两种：一种是紧凑格式，一种是展开格式，本规范选择展开格式。示例：

selector {

        property: value;

}

二、命名规则

1、文件夹

存放css样式文件的目录一般命名为style或css。

2、文件

css样式文件以.css后缀结尾。

3、变量

命名基于BEM规则，规定如下：

.block {

        property: value;

}

.block__element {

       property: value;

}

.block--modifier {

       property: value;

}

.block__element--modifier {

       property: value;

}

注：

1. .block表示更高级别的抽象或组件；
2. .block__element表示.block的后代，用于形成一个完整的.block的整体；
3. .block--modifier表示.block的不同状态或不同版本；
4. .block__elemen--modifier表示.block的后代的不同状态或不同版本；
5. block、element和modifier命名时均采用全小写，由多个单词组成时单词之间用“-”进行连接。

三、书写顺序

在书写属性时，应按功能进行分组，并以Formatting Model（布局方式、位置）>Box Model（尺寸）>Typographic（文本相关）>Visual（视觉效果）的顺序书写，以提高代码的可读性。

功能	属性
Formatting Model	display/position/float/top/right/bottom/left/overflow/clear/z-index
Box Model	width/height/margin/padding/border
Typographic	font（font-family、font-size、font-style、font-weight、font-varient）/line-height/text-align/vertical-align/text-wrap/text-transform/text-indent/text-decoration/letter-spacing/word-spacing/white-space/text-overflow/word-wrap
Visual	background/color/transition/list-style/cursor/border-radius/box-shadow/text-shadow/transform

注：如果包含 content 属性，则应放在最前面。

四、注释

1、文件头

文件头必须写在文件的最顶部，主要包含版权声明。示例如下：

/*

 * Copyright (c) yyyy-yyyy xxx CO., Ltd

 */

2、文件

文件注释主要包含功能描述、作者和日期。示例如下：

/**

 * @description: note

 *

 * @author: xxx

 * @since: yyyy-mm-dd

 */

3、单行注释

单行注释应单独占一行。示例：

/* note */

4、多行注释

多行注释注意要每一行的字符长度。示例：

/**

 * note1

 * note2

 */