CSS:对 CSS 工程化的理解(***三颗星)
CSS 工程化是为了解决以下问题:
1.宏观设计:CSS 代码如何组织、如何拆分、模块结构怎样设计?
2.编码优化:怎样写出更好的 CSS?
3.构建:如何处理我的 CSS,才能让它的打包结果最优?
4.可维护性:代码写完了,如何最小化它后续的变更成本?如何确保任何一个同事都能轻松接手?
以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践:
预处理器:Less、 Sass 等;
重要的工程化插件: PostCss;Webpack loader 等 。
基于这三个方向,可以衍生出一些具有典型意义的子问题,这里我们逐个来看:
(1)预处理器:为什么要用预处理器?它的出现是为了解决什么问题?
预处理器,其实就是 CSS 世界的“轮子”。预处理器支持我们写一种类似 CSS、但实际并不是 CSS 的语言,然后把它编译成 CSS 代码:
那为什么写 CSS 代码写得好好的,偏偏要转去写“类 CSS”呢?这就和本来用 JS 也可以实现所有功能,但最后却写 React 的 jsx 或者 Vue 的模板语法一样——为了爽!要想知道有了预处理器有多爽,首先要知道的是传统 CSS 有多不爽。随着前端业务复杂度的提高,前端工程中对 CSS 提出了以下的诉求:
1.宏观设计上:我们希望能优化 CSS 文件的目录结构,对现有的 CSS文件实现复用;
2.编码优化上:我们希望能写出结构清晰、简明易懂的 CSS,需要它具有一目了然的嵌套层级关系,而不是无差别的一铺到底写法;我们希望它具有变量特征、计算能力、循环能力等等更强的可编程性,这样我们可以少写一些无用的代码;
3.可维护性上:更强的可编程性意味着更优质的代码结构,实现复用意味着更简单的目录结构和更强的拓展能力,这两点如果能做到,自然会带来更强的可维护性。
这三点是传统 CSS 所做不到的,
剩余60%内容,订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理