一、排版
排版一般有两种:一种是紧凑格式,一种是展开格式,本规范选择展开格式。示例:
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;
}
注:
- .block表示更高级别的抽象或组件;
- .block__element表示.block的后代,用于形成一个完整的.block的整体;
- .block--modifier表示.block的不同状态或不同版本;
- .block__elemen--modifier表示.block的后代的不同状态或不同版本;
- 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
*/