【前端】浅谈CSS预处理、框架、优化方案

前言

css被称为前端三剑客之一，其重要性是不言而喻的。但其在具体开发中的开发方式，受限于其语法和功能，我个人觉得css，似乎是在“带着镣铐美容”。
而正是为了更好地实现复杂css工程化的开发，解决css相关的实际问题，所以有了CSS预处理、CSS框架、CSS优化方案这些东西，归根到底，其目的是一致的，区别的是实现的层次与具体方法。
受限于个人的开发经验和知识储备，在此只能笼统简单地介绍一下我的一点理解，权供参考，如有不对感谢指正。
以上分类方法处于路线图：https://objtube.github.io/front-end-roadmap/#/

---

CSS预处理

• Sass
• Less
• PostCSS
• Stylus

在这里我不想详细地说他们的具体内容和区别，我只想讲明几件事儿，他们是解决什么问题的、他们能做什么、推荐哪一种。

首先，是解决什么问题的。
CSS预处理你可以将他们理解为，是在本质上对CSS语言的一种改造，从而使得在CSS更像是一种可以灵活使用的编程语言，从而提高CSS开发的效率，使其符合工程化的需求。归根到底，是对CSS语言层面的改造。

第二，他们能做什么。
对此建议直接阅读他们的官方文档，简单来说，能做变量、嵌套、引入、继承、模块、数学运算等等。

第三，推荐哪一种。
你可以选择自己习惯的，Sass，Less，Stylus都有很多拥趸，PostCSS在路线图中也做了推荐，但我个人还没遇到过。我的建议是Sass。

您可以阅读以下一篇内容：
CSS预处理，总有一款适合你
以下则是他们的官网：
Sass
Less
PostCSS
Stylus
路线图：
CSS预处理

---

CSS框架

我直接截一张图放在这儿吧：

这里的框架，不是对CSS语言层面的处理，而是相当于一个已经开发好的组件库、样式库、基础系统了。
由于不在一个层级上，所以是可以组合使用的，比如用Sass来修改ElementPlus。
Vue可以用ElementPlus（vue3），ElementUI（vue2）。React可以用Ant Design。具体选择全凭你需求，本文的建议都仅供参考，不保证其功能性、适配性、可靠性、设计性符合你的需求。
路线图：
UI框架

---

CSS优化方案

路线图：
CSS Modern

这一块我并没有很理解，在我看来，优化方案似乎是一种介于原生CSS和CSS预处理之间的方案。
也就是说，它并没有像Sass之类的那样对css进行很大的变化，而是一种更加贴近CSS，但是又解决了亟需解决的若干问题。
或许也正是因此，在路线图中大标题虽然是“CSS优化方案”，但点进去之后显示的标题确实“CSS Modern”吧。这个名字还是很贴切的。

你可以看看阮一峰老师的这篇文章：
CSS Modules 用法教程
也可以浏览一下这份文档（样式库+CSS的JS使用）：
styled-components
CSS Modern的使用似乎与React的搭配更加match，在React的文档中也有一些涉及，可以查看：
Adding a CSS Modules Stylesheet

---

最后

希望我已经大致讲清了这三项内容的层次区别，并留下了适量的补充资料。
CSS预处理是对CSS的处理，是对CSS语言的改造，同时现在的CSS预处理也已经实现了对CSS的兼容（以前有些是不兼容的）
CSS优化方案是对CSS的优化，并没有对CSS产生太大的改造，可以粗浅理解为CSS的适量改进。
CSS框架是大量内容的粉装，比如组件库、样式库、基础系统等等。

可以说，这三者都是为了实现CSS工程化开发，提高开发者效率和体验的成果。
他们的上手都很快，没有很大的门槛，但是要使用得好也并不是那么的容易。
原生的CSS依然是基础，其重要性仍不可忽视。