CSS工程化概述

CSS的问题

类名冲突的问题

当你写一个 css 类的时候，你是写全局的类呢，还是写多个层级选择后的类呢？

你会发现，怎么都不好

• 过深的层级不利于编写、阅读、压缩、复用。
• 过浅的层级容易导致类名冲突。

一旦样式多起来，这个问题就会变得越发严重，其实归根结底，就是类名冲突不好解决的问题。

重复样式

这种问题就更普遍了，一些重复的样式值总是不断的出现在 css 代码中，维护起来极其困难。

比如，一个网站的颜色一般就那么几种：

• primary
• info
• warn
• error
• success

如果有更多的颜色，都是从这些色调中自然变化得来，可以想象，这些颜色会到处充斥到诸如背景、文字、边框中，一旦要做颜色调整，是一个非常大的工程。

css 文件细分问题

在大型项目中，css 也需要更细的拆分，这样有利于 css 代码的维护。

比如，有一个做轮播图的模块，它不仅需要依赖 js 功能，还需要依赖 css 样式，既然依赖的 js 功能仅关心轮播图，那 css 样式也应该仅关心轮播图，由此类推，不同的功能依赖不同的 css 样式、公共样式可以单独抽离，这样就形成了不同于过去的 css 文件结构：文件更多、拆分的更细。

而同时，在真实的运行环境下，我们却希望文件越少越好，这