父子关系

若存在明确的父子关系，尽可能使用“>”符定义样式，可以避免与更深层次的样式出现冲突。

例如：

// 不推荐
.parent {
    .child {
    // ...
    }
}

// 推荐
.parent {
    & > .child {
    // ...
    }
}

变量

• 全局、共享的变量，请使用CSS3变量定义，如：

:root {
  --color-primary: 56, 172, 252;
  --color-success: 91, 206, 88;
  --color-warning: 255, 205, 72;
  --color-danger: 255, 142, 112;
  --color-info: 205, 211, 217;
}

.btn {
    color: rgba(var(--color-primary), 0.5);
}

• 私有、局部的变量，可以使用LESS、SCSS的变量定义，如：

@top: 80px;
@bottom: 60px;
.btn {
    height: @top + @bottom;
}