网站开发所以浏览器兼容模式,做网站3个月,zencart 网站迁移,企业邮箱来一个CSS 工程化是为了解决以下问题#xff1a;
宏观设计#xff1a;CSS 代码如何组织、如何拆分、模块结构怎样设计#xff1f;编码优化#xff1a;怎样写出更好的 CSS#xff1f;构建#xff1a;如何处理我的 CSS#xff0c;才能让它的打包结果最优#xff1f;可维护性
宏观设计CSS 代码如何组织、如何拆分、模块结构怎样设计编码优化怎样写出更好的 CSS构建如何处理我的 CSS才能让它的打包结果最优可维护性代码写完了如何最小化它后续的变更成本如何确保任何一个同事都能轻松接手
以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践
预处理器Less、 Sass 等重要的工程化插件 PostCssWebpack loader 等 。
基于这三个方向可以衍生出一些具有典型意义的子问题这里我们逐个来看
1预处理器为什么要用预处理器它的出现是为了解决什么问题
预处理器其实就是 CSS 世界的“轮子”。预处理器支持我们写一种类似 CSS、但实际并不是 CSS 的语言然后把它编译成 CSS 代码 那为什么写 CSS 代码写得好好的偏偏要转去写“类 CSS”呢这就和本来用 JS 也可以实现所有功能但最后却写 React 的 jsx 或者 Vue 的模板语法一样——为了爽要想知道有了预处理器有多爽首先要知道的是传统 CSS 有多不爽。随着前端业务复杂度的提高前端工程中对 CSS 提出了以下的诉求
宏观设计上我们希望能优化 CSS 文件的目录结构对现有的 CSS 文件实现复用编码优化上我们希望能写出结构清晰、简明易懂的 CSS需要它具有一目了然的嵌套层级关系而不是无差别的一铺到底写法我们希望它具有变量特征、计算能力、循环能力等等更强的可编程性这样我们可以少写一些无用的代码可维护性上更强的可编程性意味着更优质的代码结构实现复用意味着更简单的目录结构和更强的拓展能力这两点如果能做到自然会带来更强的可维护性。
这三点是传统 CSS 所做不到的也正是预处理器所解决掉的问题。预处理器普遍会具备这样的特性
嵌套代码的能力通过嵌套来反映不同 css 属性之间的层级关系 支持定义 css 变量提供计算函数允许对代码片段进行 extend 和 mixin支持循环语句的使用支持将 CSS 文件模块化实现复用。
2PostCssPostCss 是如何工作的我们在什么场景下会使用 PostCss 它和预处理器的不同就在于预处理器处理的是 类CSS而 PostCss 处理的就是 CSS 本身。Babel 可以将高版本的 JS 代码转换为低版本的 JS 代码。PostCss 做的是类似的事情它可以编译尚未被浏览器广泛支持的先进的 CSS 语法还可以自动为一些需要额外兼容的语法增加前缀。更强的是由于 PostCss 有着强大的插件机制支持各种各样的扩展极大地强化了 CSS 的能力。
PostCss 在业务中的使用场景非常多
提高 CSS 代码的可读性PostCss 其实可以做类似预处理器能做的工作当我们的 CSS 代码需要适配低版本浏览器时PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀允许我们编写面向未来的 CSSPostCss 能够帮助我们编译 CSS next 代码
3Webpack 能处理 CSS 吗如何实现 Webpack 能处理 CSS 吗
Webpack 在裸奔的状态下是不能处理 CSS 的Webpack 本身是一个面向 JavaScript 且只能处理 JavaScript 代码的模块化打包工具Webpack 在 loader 的辅助下是可以处理 CSS 的。
如何用 Webpack 实现对 CSS 的处理
Webpack 中操作 CSS 需要使用的两个关键的 loadercss-loader 和 style-loader注意答出“用什么”有时候可能还不够面试官会怀疑你是不是在背答案所以你还需要了解每个 loader 都做了什么事情 css-loader导入 CSS 模块对 CSS 代码进行编译处理style-loader创建style标签把 CSS 内容写入标签。
在实际使用中css-loader 的执行顺序一定要安排在 style-loader 的前面。因为只有完成了编译过程才可以对 css 代码进行插入若提前插入了未编译的代码那么 webpack 是无法理解这坨东西的它会无情报错。
