CSS Module样式隔离

已于 2024-03-24 01:30:31 修改
阅读量1.5k 收藏 44
点赞数 54
文章标签： javascript 前端
于 2024-03-20 00:40:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71725283/article/details/136859472
版权

CSS Module样式隔离

问题

前端模块化之后，各个模块往往独立开发，合并打包后存在许多同名样式，样式互相覆盖，带来严重的样式污染。

JS是怎么做的

JS中同样存在重名问题，同一个文件里的变量一般不会重名，但是不同文件里就很可能重名，因此webpack打包时会把不同文件打包到不同的闭包里。

源码

比如有两个js文件，message.js和notification.js，各自有一个show方法：

// message.js
const show = () => {
	alert('message show')
}

// notification.js
const show = () => {
	alert('notification show')
}

// index.js
import { show as mShow } from './message';
import { show as nShow} from './natification';
mShow()
nShow()

产物

用webpack以index.js为入口进行打包，查看打包产物，首先定义一个__webpack_modules__的变量，是一个对象，包含3个key分别是./src/index.js，./src/message.js和./src/natification.js，对应的value则是上面3个文件对应的代码

/******/ 	var __webpack_modules__ = ({

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _message__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./message */ \"./src/message.js\");\n/* harmony import */ var _natification__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./natification */ \"./src/natification.js\");\n\n\n\n(0,_message__WEBPACK_IMPORTED_MODULE_0__.show)()\n;(0,_natification__WEBPACK_IMPORTED_MODULE_1__.show)()\n\n//# sourceURL=webpack://js-demo/./src/index.js?");

/***/ }),

/***/ "./src/message.js":
/*!************************!*\
  !*** ./src/message.js ***!
  \************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   show: () => (/* binding */ show)\n/* harmony export */ });\nconst show = () => {\n\talert('message show')\n}\n\n//# sourceURL=webpack://js-demo/./src/message.js?");

/***/ }),

/***/ "./src/natification.js":
/*!*****************************!*\
  !*** ./src/natification.js ***!
  \*****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   show: () => (/* binding */ show)\n/* harmony export */ });\nconst show = () => {\n\talert('notification show')\n}\n\n//# sourceURL=webpack://js-demo/./src/natification.js?");

/***/ })

接下来定义了__webpack_require__方法， 并提供了缓存，如果已经引入过了，就优先读缓存：

/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}

如果没有引入过，就从上面定义的__webpack_modules__变量中获取，并存放到缓存里，其中__webpack_require__里执行的

__webpack_modules__[moduleId](module, module.exports, __webpack_require__);

正是__webpack_modules__里的函数的入参数

((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
	// ... 这里省略
})

简化一下流程，伪代码是这样：

var _message__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__('src/message.js')
var _natification__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__('src/natification.js')
_message__WEBPACK_IMPORTED_MODULE_0__.show()
_natification__WEBPACK_IMPORTED_MODULE_1__.show()

我们看到，message.js和notification.js两个模块被分别引入到变量_message__WEBPACK_IMPORTED_MODULE_0__ 和 natification__WEBPACK_IMPORTED_MODULE_1_ 里，调用的时候加上前缀，实现了同名方法的隔离。

CSS Module

原生CSS

我们修改一下message和notification两个文件，分别引入css样式

  js-demo
 |- /src
   |- index.jsx
   |- message
      |- index.jsx
	  |- index.css
   |- natification
      |- index.jsx
	  |- index.css

message是红色背景色

// index.jsx
import './index.css';
export const show = () => {
	return <div className='body'>message show</div>
}

// index.css
.body {
    background: red;
}

natification是蓝色背景色

// index.js
import './index.css';
export const show = () => {
	return <div className='body'>natification show</div>
}

// index.css
.body {
    background: blue;
}

因为两个css中的.body类同名，最终展示的颜色完全取决于index.jsx中两个文件导入的顺序，后倒入颜色覆盖前面的

import { show as mShow } from './message';
import { show as nShow} from './natification';

这种情况下是两个全蓝色，并不是预期的一红一蓝。

开启CSS Module

CSS Module 指的是所有的类名和动画名称默认都有各自作用域的CSS文件，是在构建步骤中对CSS类名和选择器限定作用域的一种方式。webpack构建中，可以在css-loader中开启module支持：

  module: {
    rules: [
        {
            test: /\.css$/i,
            use: [{
                loader: 'style-loader',
            }, {
                loader: 'css-loader',
                options: {
	                modules: true,
                },
            }],
        },
    ]
 }

然后把index.css修改为in dex.module.css，同时修改引用方式为styles.body

import styles from'./index.module.css';

export const show = () => {
	return <div className={styles.body}>message show -- red {styles.body}</div>
}

经过上面的修改后实现一红一蓝的效果。我们可以看到，styles.body本身等于一个字符串，是一个hash值。

产物

最终的大包产物里，css类名已经被替换成了hash值，通过hash值，有效避免了类名重复。

/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/message/index.module.css ***!
  \************************************************************************************************************/
.Yvq5I4p7EPEoZfFgN7z7 {
    color: #fff;
    width: 200px;
    height: 200px;
    background: red;
    margin: 10px;
}
/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/natification/index.module.css ***!
  \*****************************************************************************************************************/
.hMIGfNGHuFjRZ_yQXKSb {
    color: #fff;
    width: 200px;
    height: 200px;
    background: blue;
    margin: 10px;
}

从类名到hash

CSS转换AST

css的转换一般通过postcss把css转换成语法树，例如上面的代码转换后：
在这里插入图片描述

postcss和postcss-modules

我们可以通过postcss + postcss-modules来查看转换过程，首先安装postcss和postcss-modules

npm install --save-dev postcss postcss-modules

然后增加postcss.config.js的配置文件

module.exports = {
    plugins: [
      require('postcss-modules')({})
    ]
};

最后执行命令

npx postcss ./src/message/index.module.css -o output.css

执行完成后，查看目录结构

  js-demo
 |- /src
   |- index.jsx
   |- message
      |- index.jsx
	  |- index.module.css
+	  |- index.module.css.json
   |- natification
      |- index.jsx
	  |- index.module.css
+ |- output.css

查看这里新增的index.module.css.json文件

{"body":"_body_kmgaf_1"}

生成一个json文件维护了原本的className和生成的唯一class之间的对应关系。

postcss-modules-scope

css-loader内部也是通过postcss进行转换，并且内部依赖了postcss-modules-scope来实现：

  "dependencies": {
    "postcss-modules-extract-imports": "^3.0.0",
    "postcss-modules-local-by-default": "^4.0.4",
    "postcss-modules-scope": "^3.1.1",
    "postcss-modules-values": "^4.0.0",
  },

主要的转换逻辑在postcss-modules-scope里，通过walkRules对class，id等进行转换

const plugin = (options = {}) => {
  return {
    postcssPlugin: "postcss-modules-scope",
    Once(root, { rule }) {
      const exports = Object.create(null);
      root.walkRules((rule) => {
        let parsedSelector = selectorParser().astSync(rule);
        rule.selector = traverseNode(parsedSelector.clone()).toString();
      }
    }
  }	
}

主要是找到里面的类名，id这些，重新赋值成hash值，然后输出exports。但是post-modules-scope需要声明:local

:local(.body) {
    color: #fff;
    width: 200px;
    height: 200px;
    background: red;
    margin: 10px;
  }

经过转换后得到

._Users_sunflower_Documents_TestSpace_js_demo_src_message_index_module__body {
    color: #fff;
    width: 200px;
    height: 200px;
    background: red;
    margin: 10px;
  }
:export {
  body: _Users_sunflower_Documents_TestSpace_js_demo_src_message_index_module__body;
}

为了更方便的使用css-module，postcss-modules-local-by-default插件提供了默认转换成css-module的支持，即保持原来的.body的写法也能转换成css。

CSS模块化：实现样式隔离的原理与实践
AvskBug的博客
10-01 387
CSS模块化是一种通过将样式表限定在特定的作用域内的技术，以避免全局样式的干扰。传统的CSS样式表是全局生效的，这意味着在一个页面中定义的样式可能会影响到其他页面或组件的样式。这种全局作用域的特性使得样式的维护和复用变得困难。CSS模块化通过引入作用域概念，将样式表限制在组件或模块的范围内，从而实现了样式的隔离。每个模块都有自己独立的作用域，样式规则只适用于该模块内部的元素，不会对其他模块产生影响。CSS模块化是一种有助于解决全局样式冲突和污染的前端开发技术。
CSS 怎么实现样式隔离?
祈澈菇凉
02-11 592
通过以上方法，你可以有效地实现样式隔离，避免组件间的样式冲突，提高代码的可维护性和可读性。
css样式隔离
weixin_48879122的博客
12-11 760
本文讲述了如何在react项目中给css样式添加样式隔离效果
css 隔离
wade3po的博客
08-21 2847
css一旦生效，就会应用于全局，所以很容易出现冲突。css隔离就是为了解决这个问题。可以使用的方法大概就几个： 命名空间： 这很好理解，其实就是给每个不同模块使用的css规划好命名，这样所有的css就都不会出现冲突，这种方法虽然很好理解和简单，但是编写起来很繁琐，维护成本会很高，当然，现在也有打包工具很容易就可以实现就是了。 css Modules： 这其实跟命名空间有点类似，vue应该就是使用类似的方法，给选择器加上特殊的字符串，达到css隔离的效果。 css-in-js： 这个概念已经诞生很多年了，作为
react module.scss 避免全局冲突类似vue中scoped
最新发布
初遇你时动了情
02-22 349
【代码】react module.scss 避免全局冲突类似vue中scoped。
实现 css 样式隔离的方法
有一棵树的博客
02-19 1492
开发者可以使用 Shadow DOM 来封装复杂的组件，将组件的内部结构和样式隐藏起来，只暴露必要的接口和功能给外部使用。Shadow DOM 具有类似于原生组件的特性，例如封闭的样式范围、封闭的事件处理机制等，使得开发者可以更轻松地创建自定义的原生组件或控件，提供更好的用户体验和交互效果。使用 Shadow DOM 可以实现插件化开发的方式，将插件的内容和样式封装在独立的 DOM 子树中，然后将其插入到文档中的任意位置，从而实现更灵活和可扩展的应用开发。例如，在 Vue.js 中，可以使用。
CSS 隔离方案
qq_42943914的博客
02-09 1040
BEM、css-modules、样式隔离、css、Shadow
CSS隔离实现方案
m0_60854998的博客
06-12 155
具体用法：常见的 CSS 命名规范有 BEM、OOCSS、SMACSS 等。原理：通过制定一套命名规范，避免样式之间的相互干扰，提高样式表的可维护性。BEM规范：Block、Element、Modifier。CSS 命名规范，根据子应用提前约定CSS前缀。
在 Vue3 中使用 CSS Modules 实现样式隔离
jnfy的博客
09-07 783
随着构建现代前端应用的需要，样式的管理和隔离变得越来越重要。为了解决样式冲突和管理困难的问题，CSS Modules 应运而生。今天，我们将讨论如何在 Vue3 中使用 CSS Modules 实现样式隔离，特别是在使用新的 setup 语法糖的情况下。
webpack项目轻松混用css module的方法
08-27
而CSS Module 是一种解决CSS全局命名冲突的方式，它通过将类名转换为唯一字符串，确保了在大型项目中的样式隔离。然而，当我们将CSS Module与第三方库（如antd-mobile）混合使用时，可能会遇到样式冲突的问题。本篇...
【微服务】前端微服务之样式隔离插件代码笔记
mengran_code的博客
09-30 212
【代码】【微服务】前端微服务之样式隔离插件代码笔记。
6-5 css样式隔离
bus_lupe的博客
04-11 1938
css modules webpack shadow dom <div id="box1"></div> <div id="box2"></div> <script> const box1 = document.getElementById('box1') // 开启shadow dom模式 const shadow1 = box1.attachShadow({mod..
要实现css样式隔离，你会怎么做？
BradenHan的专栏
03-08 770
。css 没有作用域的概念，这就导致 css 在书写的时候都是全局作用域。 随着 SPA 应用的兴起，全部的 css 会在同一个环境中同时进行加载，相互影响的问题更加严峻。
module.css
weixin_44462907的博客
05-21 647
文件名称：style.module.css 引入：import sty from “./style.module.css” 用法：<li className={${sty.a}}>
webpack压缩和分离css文件
qq_42309685的博客
09-01 278
项目目录如下： 打包预览（dist 和 index.html） 引入css文件（index.ts） import "./style/index.less"; console.log('entry'); 打包配置（webpack.prod.js） const webpackCommonConf = require('./webpack.common.js') const { merge } = require('webpack-merge') const { distPath } = require(
css module
xun__xing的博客
08-27 5910
css module一、css module1.思路2.实现原理3.如何应用样式 一、css module 1.思路 通过命名规范来限制类名太过死板，而css in js虽然足够灵活，但是书写不便。 css module 开辟一种全新的思路来解决类名冲突的问题 css module 遵循以下思路解决类名冲突问题： css的类名冲突往往发生在大型项目中 大型项目往往会使用构建工具（webpack等）搭建工程 构建工具允许将css样式切分为更加精细的模块 同JS的变量一样，每个css模块文件中难以出现冲突
CSS module
凡事预则立，不预则废
12-05 683
http://front-ender.me/architecture/style-modular.html
CSS Modules
前端小白的博客
09-25 345
局部作用域：每个 CSS 类名在编译时会添加一个唯一的标识符，确保类名在全局范围内是唯一的。更好的可维护性：由于样式作用域限制在组件内部，减少了全局样式冲突，使得代码更容易维护。更好的可维护性：样式作用域限制在组件内部，减少了全局样式冲突，使得代码更容易维护。避免全局样式冲突：每个组件的样式只在该组件内部生效，不会影响其他组件。更好的可复用性：组件的样式可以很容易地在不同的项目中复用。按需加载：组件所需的样式可以按需加载，提高性能。按需加载：组件所需的样式可以按需加载，提高性能。
react中css样式隔离
04-28
在 React 中，可以使用 CSS Modules、CSS-in-JS 库（如 styled-components）或者使用 React 自带的样式隔离方案——CSS Modules 的实现方式，来实现样式隔离。 CSS Modules 是一种将 CSS 样式表模块化的方案，它让...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值