CSS Module:告别类名冲突,拥抱模块化样式(5)
CSS Module 是一种解决 CSS 类名冲突的全新思路。它通过构建工具(如 webpack)将 CSS 样式切分为更加精细的模块,并在编译时将类名转换为唯一的标识符,从而避免类名冲突。本文将详细介绍 CSS Module 的实现原理和使用方法。
1. 思路
CSS Module 遵循以下思路解决类名冲突问题:
- 类名冲突:类名冲突往往发生在大型项目中。
- 构建工具:大型项目往往会使用构建工具(如 webpack)搭建工程。
- 模块化:构建工具允许将 CSS 样式切分为更加精细的模块。
- 变量机制:同 JS 的变量一样,每个 CSS 模块文件中难以出现冲突的类名,冲突的类名往往发生在不同的 CSS 模块文件中。
- 避免冲突:只需要保证构建工具在合并样式代码后不会出现类名冲突即可。
2. 实现原理
在 webpack 中,作为处理 CSS 的 css-loader
,它实现了 CSS Module 的思想。要启用 CSS Module,需要将 css-loader
的配置 modules
设置为 true
。
css-loader的实现方式如下:
原理极其简单,开启了css module后,css-loade
r会将样式中的类名进行转换,转换为一个唯一的hash值。
由于hash值是根据模块路径和类名生成的,因此,不同的css模块,哪怕具有相同的类名,转换后的hash值也不一样。
3. 如何应用样式
css module带来了一个新的问题:源代码的类名和最终生成的类名是不一样的,而开发者只知道自己写的源代码中的类名,并不知道最终的类名是什么,那如何应用类名到元素上呢?
为了解决这个问题,css-loader会导出原类名和最终类名的对应关系,该关系是通过一个对象描述的
3.1 示例
假设有一个 CSS 文件 style.css
:
.red {color: #f40;
}
在 JS 文件中,可以这样导入和应用类名:
import React from 'react';
import styles from './style.css';function App() {return (<div className={styles.red}>Hello, World!</div>);
}export default App;
4. 其他操作
4.1 全局类名
某些类名是全局的、静态的,不需要进行转换。可以在类名位置使用 :global
语法:
:global(.main) {/* 全局样式 */
}
使用了 :global
的类名不会进行转换,相反的,没有使用 :global
的类名,默认使用 :local
:
:local(.main) {/* 局部样式 */
}
4.2 控制最终的类名
大部分情况下,我们不需要控制最终的类名,因为控制它没有任何意义。如果一定要控制最终的类名,可以配置 css-loader
的 localIdentName
。
例如:
module.exports = {module: {rules: [{test: /\.css$/,use: ['style-loader',{loader: 'css-loader',options: {modules: true,localIdentName: '[local]_[hash:base64:5]'}}]}]}
};
5. 其他注意事项
- 配合构建工具:CSS Module 通常配合构建工具(如 webpack)使用。
- 避免嵌套类名:CSS Module 仅处理顶级类名,尽量不要书写嵌套的类名,也没有这个必要。
- 不处理其他选择器:CSS Module 仅处理类名,不处理其他选择器。
- 避免使用 ID 选择器:CSS Module 还会处理 ID 选择器,但任何时候都没有使用 ID 选择器的理由。
- 命名规范:使用了 CSS Module 后,只要能做到让类名望文知意即可,不需要遵守其他任何的命名规范。
6. 总结
通过本课程,你已经了解了 CSS Module 的基本概念、实现原理和使用方法。CSS Module 提供了一种全新的方式来解决类名冲突问题,使得 CSS 代码更加模块化和可维护。
相关文章:

CSS Module:告别类名冲突,拥抱模块化样式(5)
CSS Module 是一种解决 CSS 类名冲突的全新思路。它通过构建工具(如 webpack)将 CSS 样式切分为更加精细的模块,并在编译时将类名转换为唯一的标识符,从而避免类名冲突。本文将详细介绍 CSS Module 的实现原理和使用方法。 1. 思…...

JavaSE常用API-日期(计算两个日期时间差-高考倒计时)
计算两个日期时间差(高考倒计时) JDK8之前日期、时间 Date SimpleDateFormat Calender JDK8开始日期、时间 LocalDate/LocalTime/LocalDateTime ZoneId/ZoneDateTIme Instant-时间毫秒值 DateTimeFormatter Duration/Period...

AutoDL上进行tensorboard可视化
1.下载SSH隧道工具 输入ssh指令、ssh密码、代理到本地端口、代理到远程端口 2.在实例中执行:export https_proxyhttp://127.0.0.1:1080 3.在实例中执行:tensorboard --port 6006 --logdir work_dirs 4.打开 http://localhost:6006/ 即可...

20.UE5UI预构造,开始菜单,事件分发器
2-22 开始菜单、事件分发器、UI预构造_哔哩哔哩_bilibili 目录 1.UI预构造 2.开始菜单和开始关卡 2.1开始菜单 2.2开始关卡 2.3将开始菜单展示到开始关卡 3.事件分发器 1.UI预构造 如果我们直接再画布上设计我们的按钮,我们需要为每一个按钮进行编辑&#x…...

【C语言指南】C语言内存管理 深度解析
💓 博客主页:倔强的石头的CSDN主页 📝Gitee主页:倔强的石头的gitee主页 ⏩ 文章专栏:《C语言指南》 期待您的关注 引言 C语言是一种强大而灵活的编程语言,为程序员提供了对内存的直接控制能力。这种对内存…...

前海华海金融创新中心的工地餐点探寻
前海的工地餐大部分都是13元一份的哈。我在前海华海金融创新中心的工地餐点吃过一份猪杂饭,现做13元一份。我一般打包后回公司吃或直接桂湾公园找个环境优美的地方吃饭。 我点的这份猪杂汤粉主要是瘦肉、猪肝、肉饼片、豆芽和生菜,老板依旧贴心问需要…...
索引及练习
1.索引 📖什么是索引? 1. 索引是对数据库一列或者多列的值进行排序的一种结构。 2. 索引的建立会大大提高 mysql 的检索速度。 3. 如果想高效的使用 mysql, 而且数据量大时,需要花费事件去设计索引,建立优秀的索引规 则&a…...

java版嘎嘎快充汽车单车充电系统源码系统jeecgboot
汽车使用云快充1.6 1.5协议,单车用的铁塔协议 前端uniapp、后端jeecgbootvue2...

vueRouter路由切换时实现页面子元素动画效果, 左右两侧滑入滑出效果
说明 vue路由切换时,当前页面左侧和右侧容器分别从两侧滑出,新页面左右分别从两侧滑入 效果展示 路由切换-滑入滑出效果 难点和踩坑 现路由和新路由始终存在一个页面根容器,通过<transition>组件,效果只能对页面根容器有效…...
MacOS编译hello_xr——记一次CMake搜索路径限制导致的ANDROID_NATIVE_APP_GLUE not found
首先,由于之前使用过Unity, 系统已经装好了android SDK和NDK, 所以在hello_xr文件夹下, 用local.properties文件来设置系统中二者的路径: sdk.dir/Applications/Unity/Hub/Editor/2022.3.48f1c1/PlaybackEngines/AndroidPlayer/SDK/ # ndk.dir/Applications/Unity/Hub/Editor/…...

基于NI Vision和MATLAB的图像颜色识别与透视变换
1. 任务概述 利用LabVIEW的NI Vision模块读取图片,对图像中具有特征颜色的部分进行识别,并对识别的颜色区域进行标记。接着,通过图像处理算法检测图像的四个顶点(左上、左下、右上、右下),并识别每个顶点周…...

【Linux:IO多路复用(select、poll函数)
目录 什么是IO多路复用? select: 参数介绍: select函数返回值: fd_set类型: 内核如何更新集合中的标志位 处理并发问题 处理流程的步骤: poll: poll的函数原型: 参数介绍: select与p…...

计数排序(C语言)
一、步骤 1.首先,遍历数组统计出相同元素出现的次数 2.根据统计的结果将序列收回到原来的数组 方法:我们可以建立一个临时数组用来存储元素出现的次数,然后用该数组的下标表示该元素(即假设i为临时数组的下标,a[i]为…...

LabVIEW弧焊参数测控系统
在现代制造业中,焊接技术作为关键的生产工艺之一,其质量直接影响到最终产品的性能与稳定性。焊接过程中,电流、电压等焊接参数的精确控制是保证焊接质量的核心。基于LabVIEW开发的弧焊参数测控系统,通过实时监控和控制焊接过程中关…...

Android笔记(三十七):封装一个RecyclerView Item曝光工具——用于埋点上报
背景 项目中首页列表页需要统计每个item的曝光情况,给产品运营提供数据报表分析用户行为,于是封装了一个通用的列表Item曝光工具,方便曝光埋点上报 源码分析 核心就是监听RecyclerView的滚动,在滚动状态为SCROLL_STATE_IDLE的时…...
【Linux】内核模版加载modprobe | lsmod
modprobe modprobe 是一个用于加载和卸载 Linux 内核模块的命令。它不仅能够加载单个模块,还能处理模块之间的依赖关系,确保所有依赖的模块都被正确加载。以下是一些关于 modprobe 命令的基本用法和常见选项的详细介绍。 基本语法 modprobe [option…...
Android从Drawable资源Id直接生成Bitmap,Kotlin
Android从Drawable资源Id直接生成Bitmap,Kotlin val t1 System.currentTimeMillis()val bmp getBmpFromDrawId(this, R.mipmap.ic_launcher_round)Log.d("fly", "1 ${bmp?.byteCount} h${bmp?.height} w${bmp?.width} cost time${System.currentTimeMillis…...

蓝桥杯——数组
1、移动数组元素 package day3;import java.util.Arrays;public class Demo1 {public static void main(String[] args) {int[] arr {1,2,3,4,5,6};int k 2;int[] arr_new f(arr,k);for (int i : arr_new) {System.out.print(i",");}//或System.out.println();St…...
在Flutter中,禁止侧滑的方法
在Flutter中,如果你想禁用侧滑返回功能,你可以使用WillPopScope小部件,并在onWillPop回调中返回false来阻止用户通过侧滑返回到上一个页面。 class DisableSwipePop extends StatelessWidget {overrideWidget build(BuildContext context) {…...
黑盒测试案例设计方法的使用(1)
黑盒测试用例的设计是确保软件质量的关键步骤之一。 一、等价类划分法 定义:把所有可能的输入数据,即程序的输入域划分成若干部分(子集),然后从每一个子集中选取少数具有代表性的数据作为测试用例。 步骤:…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...

【JVM】- 内存结构
引言 JVM:Java Virtual Machine 定义:Java虚拟机,Java二进制字节码的运行环境好处: 一次编写,到处运行自动内存管理,垃圾回收的功能数组下标越界检查(会抛异常,不会覆盖到其他代码…...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

负载均衡器》》LVS、Nginx、HAproxy 区别
虚拟主机 先4,后7...

2025-05-08-deepseek本地化部署
title: 2025-05-08-deepseek 本地化部署 tags: 深度学习 程序开发 2025-05-08-deepseek 本地化部署 参考博客 本地部署 DeepSeek:小白也能轻松搞定! 如何给本地部署的 DeepSeek 投喂数据,让他更懂你 [实验目的]:理解系统架构与原…...