在Vue工作流中使用CSS Modules

2023-12-23 18:30

本文主要是介绍在Vue工作流中使用CSS Modules,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

CSS在工程化上的一些问题

关于React的CSS in JS,有一个著名的talk,由Facebook的工程师vjeux带来。

里面最有名的一张slide是这样的:

css in js

里面列举了CSS的一些问题。其中,Dead Code Elimination,Minification,和Sharing Constants这些问题我们已经通过在我们的工作流中加入SASS和PostCSS这样的CSS预处理器解决了。

然而还有一些问题没有解决,比如全局命名空间。同一个document下的所有CSS的类名,都是在同一个“作用域”下的,因此我们常常要考虑如何避免命名冲突问题。现有的解决办法主要是靠BEM这样的命名惯例,或者是用多层CSS父子选择器来模拟命名空间。然而这样的办法对工程师有许多的限制。多级选择器有比较高的优先级,不容易维护。

解决全局作用域:Webpack css-loader

Webpack的css-loader首先做出了解决全局作用域的尝试。解决办法就是在写CSS类名时加入:local(...)这样的标记。

比如:

:local(.className) { background: red; }
:local .className { color: green; }
:local(.className .subClass) { color: green; }
:local .className .subClass :global(.global-class-name) { color: blue; }

会被转化为:

._23_aKvs-b8bW2Vg3fwHozO { background: red; }
._23_aKvs-b8bW2Vg3fwHozO { color: green; }
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 { color: green; }
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 .global-class-name { color: blue; }

这里的办法就是把CSS类名转化为hash字符串,这样就可以保证每个类名都是独一无二的,自然也就不用在意命名冲突的问题了。只要在类名在当前模块内不会相互冲突就可以了。

CSS Modules

上述的办法,还是有一些不便。大多数情况下,比如在JavaScript中,变量都默认是局部变量。你想要声明一个全局变量,只能去全局作用域声明,或者把变量挂到local上(非严格模式下,不写var声明的是全局变量这种坑就不说了)。

Webpack的开发者之后将css-loader中的local变成了默认设定,于是CSS Modules这个规范就呼之欲出了。

CSS Modules规范。我们可以通过css-loader?modules这个参数来开启CSS Modules。

CSS Modules中的类名默认就是local的,如果你想要声明全局类名,可以加上:global(...)这个标记。

Single Responsibility Principle

讲CSS Modules的下一个特性之前。我们先聊点其他的,我们知道设计模式中有一条叫做Single Responsibility Principle。

比如我们有一个button:

.button {display:inline-block;padding:2em;background-color:red;
}

与其把这些属性写在一个class里,我们可以把它拆分成多个单独的class:

.button {display:inline-block;
}
.button--large{padding:2em;
}
.button--warnning{background-color:red;
}

然后在HTML中组合使用就可以了。

<button class="button button--large button--warnning">

这样的好处是什么呢?我们的UI中,一个组件往往有很多不同的状态。如果我们将每一个class写成只专注于一个属性,做好一件事,那就可以用这些class组合成所有我们想要的不同状态的组件。相比给每个状态的组件写一个单独的class,代码要更优雅简洁一些。

比如我们想要一个small尺寸的普通button,只要加两个class:

.button {display:inline-block;
}
.button--small{padding:1em;
}
.button--large{padding:2em;
}
.button--normal{background-color:blue;
}
.button--warnning{background-color:red;
}

然后组合就可以了:

<button class="button button--small button--normal">

CSS Classes Composing

要想实现上述的这种组合,可以使用SASS的Mixin,但Mixin主要是提供了源代码中的抽象,最后生成的代码,和手写不同状态class的代码量,是一样的。

CSS Modules提供的Classes Composing则刚好可以满足我们的需求。

比如我们想渲染一段文字:

.text{font-size: 20px;composes: red from "./common/color.css";
}

color.css里是这样的

.red{color: red;
}

最后渲染出的class是这样的

<div class="App-text-2AEnE_0 color-red-3ag3h_0"></div>

composes引入的类被作为一个单独的class引入,而不是和text类合在一起。

CSS Modules和Vue工作流的整合

Vue-loader在v9.8.0之后加入了对CSS Modules的支持。

我们只要在.vue文件的<style>处加一个module就行

<style lang="sass" module>
.text{font-size: 20px;composes: red from "sass!./common/color.scss";
}
</style>

这里有一点要注意,就是composes引入的如果是需要预处理器处理的,要在前面加上预处理器的标记,比如SASS用户就加上sass!

如果需要对CSS Modules进行一些配置(其实这个是对Webpack的css-loader的配置,所以配置时可以参考css-loader的文档),写在vue-loader的配置的cssModules属性里即可

loader: 'vue',
options: {cssModules: {localIdentName: '[name]-[local]-[hash:base64:5]',camelCase: true}
}    

vue-loader会自动将一个$style属性注入到对应的Vue实例中。在模板中用class binding语法写就可以了。

<template><div :class="$style.app"><div :class="$style.text">some text</div><main-text></main-text></div>
</template>

$style其实是一个原class名和处理之后class名的hash,像这样:

{app: "App-app-3cl75_0",text: "App-text-2AEnE_0 color-red-3ag3h_0"
}

我写一了一个简单的DEMO仓库,可以供参考。

结语

CSS Modules可以解决全局作用域和Class组合两个问题,加上SASS等预处理器,着实让我们在写CSS时的工程化程度大大提高了。

对于使用Vue的同学来说,vue-loader可以使CSS Modules可以轻松的整合到已有的工作流中。如果你正在使用Vue,可以试试使用CSS Modules。

Links

  • CSS Modules Welcome to the Future

  • The case for CSS modules - Mark Dalgleish

  • React: CSS in JS by vjeux

博客原文链接

这篇关于在Vue工作流中使用CSS Modules的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/529009

相关文章

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态

prometheus如何使用pushgateway监控网路丢包

《prometheus如何使用pushgateway监控网路丢包》:本文主要介绍prometheus如何使用pushgateway监控网路丢包问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录监控网路丢包脚本数据图表总结监控网路丢包脚本[root@gtcq-gt-monitor-prome

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected