css工程化概述

css问题

1. 类名冲突问题

当你写一个css的时候,你是写全局得类呢,还是写多个层级的类呢?

你会发现,怎么写都不好

• 过深的层级不理与编写,阅读,压缩,服用
• 过浅的层级容易导致类名冲突

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

2. 重复样式

这种问题就更普遍了,一些重复的样式总是不断的出现在css代码 中,维护起来极其困难
比如,一个网站的颜色一般就那么几种:

• primary
• info
• warn
• error
• success

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

3 css文件细分问题

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

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

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

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

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

如何解决问题

这么多年,官方一直没有提出方案解决以上问题

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

1. 解决类名冲突

一些第三方的机构提出一下方案来解决该问题,常见的解决

命名约定

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

• BEM
• OOCSS
• AMCSS
• SMACSS
• 其他

css in js

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

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

• 通过一个函数返回一个样式对象
• 把公共的样式提取到公共的模块中返回
• 应用js的各种特性操作对象,比如:混合,拆分,提取
• 更多地花样

这中方案在手机端的React Native中大行其道

css module

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

2. 解决重复样式问题

css in js

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

预编译器

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

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

常见的预编译支持的语言有:

• less
• sass

3.解决css文件细分问题

这一部分,就要依赖构建工具,例如webpack来解决

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