编码规范
@charset
统一约定,在所有的样式文件中添加 @charset
编码格式
css
@charset "utf-8";
.galaxy {
}
格式化
样式编写一般有 2 种:紧凑格式
和展开格式
统一约定展开格式:
css
.galaxy {
display: block;
width: 100px;
height: 100px;
}
缩进规则
统一约定 2 个空格进行缩进,可通过编辑器进行相关配置
分号
统一约定 css 属性声明末尾添加分号
css
.galaxy {
display: block;
width: 100px;
height: 100px;
}
属性值引号
css 属性值添加引号,统一约定单引号
css
.galaxy {
font-size: '微软雅黑';
}
浏览器私有前缀:
- vue、react 项目中,通过打包配置统一天添加,无需手动编写
css
.galaxy {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
DANGER
项目中不使用 @import
引入样式,对比<link>
,@import
要慢很多,不仅增加额外请求数,可能导致不可预料的问题。 文档说明