项目规范

# CSS

# 编码风格

# 缩进

始终使用 soft tab（2个空格）

# 代码书写格式

样式书写一般有两种：一种是紧凑格式 (Compact)

.element { display: block; width: 50px; }

一种是展开格式 (Expanded)

.element {
  display: block;
  width: 50px;
}

项目中请始终使用紧凑格式书写样式，@keyframes 除外。

在 Vue 单文件组件中，紧凑的写法能有效减少样式占用的代码行数，选择器结构看起来更清晰。

注意

属性应该和选择器写在同一行

.parent { display: block; width: 50px;
  .child { width: 20px; }
}

# 代码大小写

始终使用小写，横线连接 (kebab-case)

# 选择器

  • 尽量少用通用选择器 *
  • 尽量少使用 ID 选择器
  • 不使用标签选择器
  • 选择器的嵌套尽量不超过 3 层

# 属性书写顺序

建议遵循以下顺序：

  1. 类型：display
  2. 布局定位：position / flex / float ...
  3. 盒模型：width / height / margin / padding / border ...
  4. 文字排版：line-height / font / text-align ...
  5. 颜色背景：color / background ...
  6. 其他：opacity / cursor / box-shadow / transform / animation ...

# 浏览器私有前缀写法

带有浏览器私有前缀的在前，标准属性在后

示例：

.element {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

← 介绍 →