css工程化概述

css工程化概述 {ignore}
css的问题
类名冲突的问题
当你写一个css类的时候，你是写全局的类呢，还是写多个层级选择后的类呢？

你会发现，怎么都不好

过深的层级不利于编写、阅读、压缩、复用
过浅的层级容易导致类名冲突
一旦样式多起来，这个问题就会变得越发严重，其实归根结底，就是类名冲突不好解决的问题

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

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

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

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

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

而同时，在真实的运行环境下，我们却希望文件越少越好，这种情况和JS遇到的情况是一致的

因此，对于css，也需要工程化管理

从另一个角度来说，css的工程化会遇到更多的挑战，因为css不像JS，它的语法本身经过这么多年并没有发生多少的变化（css3也仅仅是多了一些属性而已），对于css语法本身的改变也是一个工程化的课题

如何解决
这么多年来，官方一直没有提出方案来解决上述问题

一些第三方机构针对不同的问题，提出了自己的解决方案

解决类名冲突
一些第三方机构提出了一些方案来解决该问题，常见的解决方案如下：

命名约定

即提供一种命名的标准，来解决冲突，常见的标准有：

BEM
OOCSS
AMCSS
SMACSS
其他
css in js

这种方案非常大胆，它觉得，css语言本身几乎无可救药了，干脆直接用js对象来表示样式，然后把样式直接应用到元素的style中

这样一来，css变成了一个一个的对象，就可以完全利用到js语言的优势，你可以：

通过一个函数返回一个样式对象
把公共的样式提取到公共模块中返回
应用js的各种特性操作对象，比如：混合、提取、拆分
更多的花样
这种方案在手机端的React Native中大行其道

css module

非常有趣和好用的css模块化方案，编写简单，绝对不重名

具体的课程中详细介绍

解决重复样式的问题
css in js

这种方案虽然可以利用js语言解决重复样式值的问题，但由于太过激进，很多习惯写css的开发者编写起来并不是很适应

预编译器

有些第三方搞出一套css语言的进化版来解决这个问题，它支持变量、函数等高级语法，然后经过编译器将其编译成为正常的css

这种方案特别像构建工具，不过它仅针对css

常见的预编译器支持的语言有：

less
sass
解决css文件细分问题
这一部分，就要依靠构建工具，例如webpack来解决了

利用一些loader或plugin来打包、合并、压缩css文件