全面总结CSS代码的编写规范及优化建议

CSS Code复制内容到剪贴板

/* ✗ Avoid: 3 levels of nesting */  
.image-frame {   
  > .description {   
    /* … */  
  
    > .icon {   
      /* … */  
    }   
  }   
}   
  
/* ✓ Better: 2 levels */  
.image-frame {   
  > .description { /* … */ }   
  > .description > .icon { /* … */ }   
}  

Apprehensions（顾虑）

中划线-是一坨糟糕的玩意：其实你可以选择性的使用，只要将 Components, Elements, Variants 记在心上即可。
我有时候想不出两个单词唉：有些组件的确使用一个单词就能表意，比如 aleter。但其实你可以使用后缀，使其意识更加明确。
比如块级元素：

.alert-box
.alert-card
.alert-block
或行内级元素

.link-button
.link-span
Terminologies（术语）

RSCSS 与其他 CSS 模块组织系统相似的概念

Summary（总结）

以 Components 的角度思考，以两个单词命名（.screenshot-image）
Components 中的 Elements，以一个单词命名（.blog-post .title）
Variants，以中划线-作为前缀（.shop-banner.-with-icon）
Components 可以互相嵌套
记住，你可以通过继承让事情变得更简单
LESS 规范
代码组织

代码按以下顺序组织：

@import
变量声明
样式声明

CSS Code复制内容到剪贴板

@import "mixins/size.less";   
  
@default-text-color: #333;   
  
.page {   
  width: 960px;   
  margin: 0 auto;   
}  

@import 语句

@import 语句引用的文需要写在一对引号内，.less 后缀不得省略。引号使用 ‘ 和 " 均可，但在同一项目内需统一。

CSS Code复制内容到剪贴板

/* Not recommended */  
@import "mixins/size";   
@import ‘mixins/grid.less’;