优化css代码管理的实践和总结为了不使全局变量遭到污染以及更优雅的使用选择器。务必在不同的组件中使用不同的前缀来进行管理

背景

1.老项目杂乱的css代码造成的包括但不限于全局样式覆盖，难以全局维护样式，嵌套复杂等待问题 2.开了一个内部组件库的项目，从项目层面上约束css的代码管理

实现一个可复用性高，可读性高，易维护的css代码项目结构

结构纬度上分为项目整体纬度和组件纬度

在根目录下新建一个_style文件夹，用于存放项目纬度的样式文件

这里经常会对全局的样式表进行引用

对于不同的组件使用不同的通用前缀

为了不使全局变量遭到污染以及更优雅的使用选择器。务必在不同的组件中使用不同的前缀来进行管理
变量抽离

这个概念在预编译中无处不在。只要有必要进行复用的同一变量都应该进行变量的抽离

例如： @white-base: #fff;抽离一个值为白色颜色的变量

mixin方法抽离

考验css实现是否优雅的关键。

例如：我在全局有多次使用等宽高的css样式

.size(@width; @height) {
width: @width;
height: @height;
}

.square(@size) {
  .size(@size; @size);
}