010-CSS-书写规范

书写规范

• 1、类名规范：清晰明了，尽量保持类名唯一性，使用两到三个完整单词，采用中划线拼接
• 2、样式嵌套不要太深，以两到三层为最佳，否则影响查找性能
• 3、抽离公共样式文件，抽离公共变量
• 4、index.php/tags-41973.html" >���加 scoped 作用域限制，避免样式全局污染

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

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

  /* 正确示例 */.order-list-page {  .header-navbar {    /* 此处写样式 */  }}/* 错误示例 */.text {}p,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 作用域限制，避免样式全局污染

  （）（）