010-CSS-书写规范

💡 Tips：项目开发需要定义书写规范，保证项目成员编写代码规范性，一致性。以下示例都采用 Less 扩展语言演示

1、类名规范：清晰明了，尽量保持类名唯一性，使用两到三个完整单词，采用中划线拼接

/* 正确示例 */
.order-list-page {
  .header-navbar {
    /* 此处写样式 */
  }
}

/* 错误示例 */
.text {}
div,span {}

2、样式嵌套不要太深，以两到三层为最佳，否则影响查找性能

/* 正确示例 */
.header-navbar {
  .header-navbar-left {}
  .header-navbar-right {}
}

/* 错误示例 */
.userPage {
  .main-box {
    .formBox {
      // ...
    }
  }
}

3、抽离公共样式文件，抽离公共变量

/* 公共变量文件 */
@blue: #007aff;
@borderColor: #ccc;
@errorColor: #f00;
// ...

@pm: 12px;
@2pm: 24px;
@boldBorder: 3px;
// ...

4、添加 scoped 作用域限制，避免样式全局污染

<style lang="less" scoped></style>