首页 > 其他分享 >什么是 CSS 工程化

什么是 CSS 工程化

时间:2024-03-24 16:01:08浏览次数:28  
标签:什么 loader Webpack 处理器 工程化 PostCss 代码 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 提出了以下的诉求:

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

这三点是传统 CSS 所做不到的,也正是预处理器所解决掉的问题。预处理器普遍会具备这样的特性:

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

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

在这里插入图片描述

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

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

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

(3)Webpack 能处理 CSS 吗?如何实现?

1、Webpack 在裸奔的状态下,是不能处理 CSS 的,Webpack 本身是一个面向 JavaScript 且只能处理 JavaScript 代码的模块化打包工具;
2、Webpack 在 loader 的辅助下,是可以处理 CSS 的。

如何用 Webpack 实现对 CSS 的处理:

1、Webpack 中操作 CSS 需要使用的两个关键的 loader:css-loader 和 style-loader
2、每个 loader 都做了什么事情:
● css-loader:导入 CSS 模块,对 CSS 代码进行编译处理;
● style-loader:创建style标签,把 CSS 内容写入标签。

在实际使用中,css-loader 的执行顺序一定要安排在 style-loader 的前面。因为只有完成了编译过程,才可以对 css 代码进行插入;若提前插入了未编译的代码,那么 webpack 是无法理解这坨东西的,它会无情报错。

标签:什么,loader,Webpack,处理器,工程化,PostCss,代码,CSS
From: https://blog.csdn.net/weixin_57837275/article/details/136989169

相关文章

  • 一个操作让数组处理速度快了5倍,到底是为什么
     概述:通过对数组进行排序,代码更好地利用了缓存,从而提高了程序的性能。这种现象通常被称为"缓存友好"(cache-friendly)或"空间局部性"(spatiallocality)今天做一个数组数据计算时,发现一个效率问题,给大家分享一下一个数组排序和不排序时同样的逻辑处理速度是不一样的。排序后速度......
  • Java为什么创建一个字符串对象需要在内存中创建两份
    在Java中,当你使用Strings=newString("abc")这样的语法创建一个字符串时,实际上会在内存中创建两个对象。这是因为Java中的字符串分为两种类型:一种是使用字面量的方式创建的字符串,另一种是通过new关键字创建的字符串。当我们使用字面量方式创建字符串时,例如Strings="a......
  • 数据库中什么时候使用自增id,什么时候不能使用
    在数据库中,自增ID的使用场景主要有以下几个:插入记录时不需要指定ID:使用自增ID可以避免手动指定ID,从而避免了因重复ID导致的错误数据库自动编号,速度快:数据库会按照预设的步长(默认为1)进行编号,这对于检索非常有利占用空间小,易于排序和传递:数字型的自增ID通常只占用4个字节,比字......
  • Redis 哨兵是什么?哨兵配置详解
    Redis的主从复制模式下,一旦主节点由于故障不能提供服务,需要人工将从节点晋升为主节点,同时还要通知应用方更新主节点地址,Redis从2.8开始正式提供了RedisSentinel(哨兵)架构来解决这个问题。RedisSentinel是一个分布式架构,其中包含若干个Sentinel节点和Redis数据节点,......
  • react中什么时候使用useRef,直接在外层定义普通的变量可以吗
    react中什么时候使用useRef,直接在外层定义普通的变量可以吗在React中,useRef主要是用来创建一个可变的引用对象,它可以用来保存任何可变值,而且这个引用在组件重新渲染时始终保持不变。以下是几个典型使用场景:访问DOM元素:当你需要直接访问HTML元素时,可以使用useRef创建一个引......
  • new ReactRefreshWebpackPlugin({ overlay: false, }), 作用是什么
    ReactRefreshWebpackPlugin是一个专门为React应用程序提供快速热更新(FastRefresh/HotReloading)的Webpack插件。当你的React组件代码发生变化时,它能够自动重新渲染受影响的组件,而不是刷新整个页面,从而显著提升开发效率。配置项中的overlay:false表示禁用错误提示覆......
  • 在Linux中,文件权限有哪些?有什么作用?
    在Linux中,文件权限是系统安全性的关键组成部分,它决定了哪些用户或用户组可以访问文件或目录。文件权限主要有以下几种:读权限(r):表示可以读取文件的内容。例如,使用cat或less命令查看文件内容时,需要该文件具有读权限。写权限(w):允许用户修改文件的内容。例如,使用vim或vi等文本编辑器......
  • 在Linux中,`/etc/passwd` 和 `/etc/shadow` 文件分别有什么作用?
    在Linux系统中,/etc/passwd和/etc/shadow文件是用于存储系统用户账户信息的关键配置文件,它们各自扮演不同的角色,共同管理系统的用户身份验证和密码安全性。/etc/passwd文件:作用:存储了系统中的每个用户的基本信息,包括用户名、用户ID(UID)、组ID(GID)、用户信息描述(GECOS)、用......
  • git tag -a v1.2.0 -m "version: 1.2.0" 这个是什么意思
    gittag-av1.2.0-m"version:1.2.0"这个是什么意思gittag-av1.2.0-m"version:1.2.0"是Git命令行中创建带有注解(annotated)标签的操作。具体含义和作用如下:gittag:基础命令,用于创建、列出、删除或校验Git标签。-a:选项指定创建一个带有注解的标签(annotate......
  • 在使用 Yarn Workspaces 时,有业务包A和组件库包B,两个包分别引用了antd4 和antd5 三方
    在使用YarnWorkspaces时,有业务包A和组件库包B,两个包分别引用了antd4和antd5三方包,安装依赖时该注意什么?在使用YarnWorkspaces的项目中,如果有业务包A和组件库包B,分别引用了antdv4和antdv5两个不同版本的三方包,安装依赖时需要注意以下几点:版本隔离:由于antd......