Skip to content

编码规范

@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要慢很多,不仅增加额外请求数,可能导致不可预料的问题。 文档说明