【前端面经】CSS-CSS的工程化

这篇具有很好参考价值的文章主要介绍了【前端面经】CSS-CSS的工程化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CSS 工程化的目的是解决以下问题:

  1. 宏观设计:如何组织 CSS 代码、如何拆分、如何设计模块结构?
  2. 编码优化:如何编写更好的 CSS 代码?
  3. 构建:如何处理 CSS 代码,以让打包结果最佳?
  4. 可维护性:代码写完后,如何最小化后续变更的成本?如何确保任何同事都能轻松接手?

以下三个方向是当前比较流行且普适的 CSS 工程化实践:

  1. 预处理器:如 Less、Sass 等;
  2. 重要的工程化插件:PostCss;
  3. Webpack loader 等。

基于这三个方向,可以衍生出一些具有典型意义的子问题,以下我们逐个来看:

预处理器

为什么要用预处理器?它的出现是为了解决什么问题?

预处理器是 CSS 世界的“轮子”。它支持我们使用类似 CSS 但不同于 CSS 的语言,然后将其编译成 CSS 代码。

为什么要使用预处理器?因为传统 CSS 存在以下问题:

  • 宏观设计上:我们希望优化 CSS 文件的目录结构,实现对现有 CSS 文件的复用;
  • 编码优化上:我们希望编写结构清晰、简明易懂的 CSS 代码,需要它具有一目了然的嵌套层级关系,而不是无差别的一铺到底写法;我们希望它具有变量特征、计算能力、循环能力等更强的可编程性,这样我们可以少写一些无用的代码;
  • 可维护性上:更强的可编程性意味着更优质的代码结构,实现复用意味着更简单的目录结构和更强的拓展能力。这两点如果实现,自然会带来更强的可维护性。

预处理器普遍具备以下特性:

  • 嵌套代码能力,通过嵌套反映不同 CSS 属性之间的层级关系;
  • 支持定义 CSS 变量;
  • 提供计算函数;
  • 允许对代码片段进行 extend 和 mixin;
  • 支持循环语句的使用;
  • 支持将 CSS 文件模块化,实现复用。

PostCss

PostCss 是如何工作的?我们在什么场景下会使用 PostCss?

PostCss 和预处理器的不同之处在于,预处理器处理的是类 CSS,而 PostCss 处理的是 CSS 本身。类似 Babel 可以将高版本的 JavaScript 代码转换为低版本的 JavaScript 代码。PostCss 做的是类似的事情:它可以编译尚未被浏览器广泛支持的先进 CSS 语法,还可以自动为一些需要额外兼容的语法增加前缀。由于 PostCss 有着强大的插件机制,支持各种各样的扩展,它极大地强化了 CSS 的能力。

PostCss 在业务中的使用场景非常多:

  • 提高 CSS 代码的可读性:PostCss 可以做类似预处理器能做的工作;
  • 当我们的 CSS 代码需要适配低版本浏览器时,PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀;
  • 允许我们编写面向未来的 CSS:PostCss 能够帮助我们编译 CSS next 代码。

Webpack 能处理 CSS 吗?

在裸奔的 Webpack 中,是不支持直接处理 CSS 文件的。这时我们需要使用 loader 将 CSS 文件转换为 JS 对象,再交给 Webpack 去处理。

Webpack 提供了一些常用的 CSS loader,如 css-loaderstyle-loader 等。其中 css-loader 可以将 CSS 文件转换为 JS 对象,而 style-loader 则可以将 JS 对象转换为样式标签,插入到 HTML 文件中。

除此之外,Webpack 还支持一些优秀的 CSS 工具,如 postcss-loadersass-loader 等,它们可以帮助我们在打包过程中自动编译 Sass 文件,自动为 CSS 添加浏览器前缀,自动压缩 CSS 文件等等。

总之,Webpack 在处理 CSS 方面,提供了非常丰富的 loader 和插件,让我们可以非常方便地进行 CSS 工程化的开发。文章来源地址https://www.toymoban.com/news/detail-438338.html

到了这里,关于【前端面经】CSS-CSS的工程化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端工程化-NPM

    NPM代表npmjs.org这个网站,这个站点存储了很多Node.js的第三方功能包。 NPM的全称是Node Package Manager,它是一个Node.js包管理和分发工具,已经成为非官方的发布Node模块(包)的标准。它可以让JavaScript开发者能够更加轻松地共享代码和共用代码片段,并且通过NPM管理需要分享的代

    2024年02月09日
    浏览(88)
  • 什么是前端工程化?

    前端工程化是一种思想,而不是某种技术。主要目的是为了提高效率和降低成本,也就是说在开发的过程中可以提高开发效率,减少不必要的重复性工作等。 tip 现实生活举例 建房子谁不会呢?请几个工人一上来就开始弄,在建筑的过程中缺了材料就叫个工人去买,发现工期

    2024年02月15日
    浏览(78)
  • 前端工程化与webpack

    能够说出什么是前端工程化 能够说出webpack的作用 能够掌握webpack的基本使用 了解常用plugin的基本使用 了解常用loader的基本使用 能够说出Source Map的作用 前端工程化 webpack的基本使用 webpack中的插件 webpack中的loader 打包发布 Source Map 1.1小白眼中的前端开发vs实际的前端开发 实际

    2024年02月13日
    浏览(71)
  • 前端工程化知识系列(9)

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 持续性能监控和自动化性能优化在前端开发中非常重要。以下是一些相关工具和实践: 性能监控工具 :工具如Google Lighthouse、WebPageTest、PageSpeed Insights等可以

    2024年02月07日
    浏览(61)
  • Ajax及前端工程化

    Ajax:异步的js与xml。 作用: 1、通过ajax给服务器发送数据,并获得其响应的数据。 2、可以在不更新整个网页的情况下,与服务器交换数据并更新部分网页的技术。  1、准备数据地址  2、创建XMLHttpRequest对象,用于和服务器交换数据  3、向服务器发送请求  4、获取服务器响

    2024年02月12日
    浏览(63)
  • 前端需要理解的工程化知识

    1.1 Git 常见工作流程  Git 有4个区域:工作区(workspace)、index(暂存区)、repository(本地仓库)和remote(远程仓库),而工作区就是指对文件发生更改的地方,更改通过git add 存入暂存区,然后由git commit 提交至本地仓库,最后push推送到远程仓库。 工作目录 包括.git 子目录(

    2024年02月10日
    浏览(66)
  • 前端工程化之模块化

    前端模块化是一种标准,不是实现 理解模块化是理解前端工程化的前提 前端模块化是前端项目规模化的必然结果 前端模块化就是将复杂程序根据规范拆分成若干模块,一个模块包括输入和输出。而且模块的内部实现是私有的,它通过对外暴露接口与其他模块通信,而不是直

    2024年02月11日
    浏览(373)
  • 前端工程化之 webpack <一>

    编写的代码 ==》经过打包工具(glup、rollup、webpack、vite)本身也是js代码,读取文件操作的, 依赖于 node 环境 = = 》 普通的html 、css 、javascript = = 》 打包到静态服务器 = = 》 跑在用户的浏览器 用于对路径和文件进行处理 在 Mac OS、Linux 和 window 上的路径上是不一样的,部署的

    2024年01月24日
    浏览(67)
  • 前端工程化:express服务端开发

    npm i -S express node app.js 全局中间件:第一个参数是回调函数时,则针对所有请求生效 路由中间件:第一个参数是匹配路由,第二个参数为回调函数 异常中间件:回调函数包含四个参数 异常中间件:回调函数包含四个参数 全局异常捕获 全局Promise异常捕获 需要购买或者找免费

    2023年04月23日
    浏览(67)
  • Javaweb基础-前端工程化学习笔记

    变量与模版字符串 let 和var的差别: const和var的差异 1、新增const和let类似,只是const定义的变量不能修改 2、并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。 模板字符串(template string)是增强版的字符串,用反引号(`)标识 1、字符串中可以

    2024年02月20日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包