前端 CSS 规范
缩进
使用两个空格缩进
分号
每个属性声明后面都要加分号。
css
.element {
width: 20px;
height: 20px;
background-color: red;
}空格
以下几种情况不需要空格：
- 属性名后
- 多个规则的分隔符','前
!important'!'后- 属性值中'('后 和 ')'前
- 行末不要有多余的空格
以下几种情况需要空格：
- 属性值前
- 选择器'>', '+', '~'前后
- '{'前
!important'!'前@else前后- 属性值中的','后
- 注释'/'后和'/'前
css
/* good */
.element > .dialog{
color: red !important;
background-color: rgba(0, 0, 0, 0.5);
}换行
以下几种情况不需要换行：
- '{'前
以下几种情况需要换行：
- '{'后和'}'前
- 每个属性独占一行
- 多个规则的分隔符','后
css
/* not good */
.element
{color: red; background-color: black;}
/* good */
.element {
color: red;
background-color: black;
}
/* not good */
.element, .dialog {
...
}
/* good */
.element,
.dialog {
...
}注释
注释统一用'/* */'（scss中也不要用'//'），具体参照右边的写法；
缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。
css
/* Modal header */
.modal-header {
color: red; /* color red */
}引号
最外层统一使用双引号；
url的内容要用引号；
属性选择器中的属性值需要引号。
css
.element:after {
content: "";
background-image: url("logo.png");
}
li[data-type="single"] {
...
}命名
- 不使用 id 选择器
- 使用有意义的名词命名
- 单词全部小写，名词超过 1 个时，使用
-分隔符
属性声明顺序
原则：整体到局部，外部到内部，重要属性优先
css
.element {
display: block;
float: left;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
margin: 0 100px;
padding: 50px; // padding习惯写到margin后面
width: 100px;
height: 100px;
border: 1px solid #e5e5e5; border-radius: 3px;
font: normal 13px "Helvetica Neue", sans-serif;
color: #333;
text-align: center;
line-height: 1.5;
background-color: #f5f5f5;
opacity: 1;
}颜色
颜色16进制用小写字母；
css
/* good */
.element {
color: #abcdef;
background-color: #012;
}杂项
- 不允许有空的规则
- 小数点前面添加0 (Prettier会默认添加)
rgba(0, 0, 0, 0.5) - 去掉数字中不必要的小数点和末尾的0
- 属性值0后面不要添加单位
padding: 0 10px; - less或scss, 嵌套不要超过4层
工具
使用 prettier 格式化工具约束.