全局
- 协作开发及分工：公⽤的reset.css统⼀书写（重置部分浏览器自带样式），此⽂件不可随意修改
- 不允许有空的规则
- 元素选择器⽤⼩写字⺟
- 去掉数字中不必要的⼩数点和末尾的 0
- 属性值 0 后⾯不要加单位
- 不要在同个规则里出现重复的属性（css规则有三种：行内、内部、外部）
- 不要在⼀个⽂件里出现两个相同的规则，会导致后面的规则覆盖前面的规则，造成样式混乱和代码冗余
- ⽤ border: 0; 代替 border: none;
- 选择器不要超过4层（在 scss\less 中如果超过4层应该考虑⽤嵌套的⽅式来写）
- 尽量少用 * 选择器
- 尽量少用 important
- 分号（每个属性声明末尾都要加分号）
- ⽆前缀的标准属性应该写在有前缀的属性后⾯
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
less或sass
- 代码组织顺序： @import、 变量声明、 样式声明
- 层级结构要清晰
- 避免⼤量的嵌套规则，最多不能超过5层；
- 去掉不必要的父级引⽤符号 &
.element {
& > .dialog {
...
}
}
/* better */
.element {
> .dialog {
...
}
}
- 混⼊（Mixin） mixin 名称（⾮需要使⽤的 className）必须加上括号，否则即使不被调⽤也会输出到 CSS 中，造成不必要的重复
.big-text {
font-size: 2em;
}
h3 {
.big-text;
}
// better
.big-text() {
font-size: 2em;
}
h3 {
.big-text();
}
属性声明顺序（推荐）
- Layout（布局）相关的属性，例如
width、height、display、position、float等。 - Box Model（盒模型）相关的属性，例如
padding、border、margin等。 - Typography（排版）相关的属性，例如
font、line-height、text-align等。 - Visual（视觉效果）相关的属性，例如
background、color、opacity、box-shadow等。 - Misc（其他）相关的属性，例如
cursor、overflow、animation、transition等。
具有相同功能和目的的属性放在一起，方便了代码的阅读和维护。此外，该顺序也符合CSS解析器的处理顺序，可以优化CSS性能。当然，这只是一种推荐的顺序。
命名规范
- 使用有意义、易于理解的名称，不要使用无意义或难以理解的缩写或单词。
- 使用小写字母和短横线分隔符（例如：
.header-nav），不要使用大写字母、下划线或驼峰式命名法。 - 避免使用具体的元素名称（例如：
.red-text），而是使用描述性的类名（例如：.highlighted-text）。 - 根据元素的作用和位置来命名（例如：
.footer、.sidebar、.main-content等）。 - 如果需要对某个元素进行多次样式定义，则可以使用更加通用的类名，例如：
.button、.link等。这样可以避免重复编写样式代码。
颜色
统⼀使⽤⼗六进制记号形式 #rrggbb ,或简写 #fff ,不允许使⽤ rgb()。如果需要透明度，可使用rgba()
空格
以下几种情况不需要空格：
- 属性名后
- 多个规则的分隔符','前
- !important '!'后 color :red! important;
- 属性值中 计算符号 前后：calc(100% - 20px)
- ⾏末不要有多余的空格
以下几种情况需要空格：
- 属性值前
- 选择器 > , + 前后
- { 前
- !important ! 前 color :red !important;
- 属性值中的 , 后
- 注释 /* 后和 */ 前
.element {
color :red! important;
background-color: rgba(0,0,0,.5);
}
/* better */
.element {
color: red !important;
background-color: rgba(0, 0, 0, .5);
}
.element ,
.dialog{
...
}
/* better */
.element,
.dialog {
...
}
.element>.dialog{
...
}
/* better */
.element > .dialog{
...
}
.element{
...
}
/* better */
.element {
...
}
@if{
...
}@else{
...
}
/* better */
@if {
...
} @else {
...
}
空行
- ⽂件最后保留⼀个空⾏
- } 后最好跟⼀个空⾏，包括 scss 中嵌套的规则
- 属性之间需要适当的空⾏
换行
- 不需要换⾏： { 前
- 需要换⾏： } 后
- 每个属性独占⼀⾏
注释
- 注释统⼀⽤ /* */
- 缩进与下⼀⾏代码保持⼀致；
- 可位于⼀个代码⾏的末尾，与代码间隔⼀个空格。
color: red; /* color red */
引号
- 最外层统⼀使⽤单引号；
- url() 的内容要⽤引号；
- 属性选择器中的属性值需要引号
