实现 css 样式隔离的方法

样式隔离是一种在 Web 开发中常用的技术,用于确保组件或模块之间的样式不会相互影响,从而提高代码的可维护性和可重用性

  1. CSS Modules: CSS Modules 是一种将 CSS 文件转换成 JavaScript 模块的技术,其中每个 CSS 类都会被自动命名,从而避免了类名冲突。在使用 CSS Modules 时,每个组件都可以拥有自己的 CSS 文件,并且其中的类名只在当前组件中有效,不会影响其他组件。【每个css文件就相当于一个独立的模块,使用 import 导入】

  2. CSS-in-JS: CSS-in-JS 是一种将 CSS 写在 JavaScript 中的技术,其中使用了类似于 CSS Modules 的自动命名机制来确保样式的隔离性。常见的 CSS-in-JS 库包括 styled-components、Emotion 等。【需要使用一些库,react、vue等项目中都能用,但是 vue 中不如 react 中使用的多,参考

  3. Scoped CSS: Scoped CSS 是一种使用特殊的选择器或属性来限定样式的作用范围的技术。例如,在 Vue.js 中,可以使用 <style scoped> 标签来定义组件的样式,从而确保样式只在当前组件中生效。【参考

  4. Shadow DOM: Shadow DOM 是一种浏览器原生的技术,用于创建独立的 DOM 子树和样式范围。通过将组件的内容包裹在 Shadow DOM 中,可以确保组件内部的样式不会影响到外部的样式。Shadow DOM的作用:

    1. Shadow DOM(影子 DOM)是 Web 标准的一部分,它为 Web 开发者提供了一种创建独立的 DOM 子树和样式范围的机制

    2. 样式隔离: Shadow DOM 允许开发者在一个独立的 DOM 子树中定义样式,使得样式只对该子树内部生效,不会影响到外部文档或其他 DOM 元素。这样做可以避免全局样式污染和样式冲突的问题,提高了代码的可维护性和可重用性。

    3. 封装组件: 开发者可以使用 Shadow DOM 来封装复杂的组件,将组件的内部结构和样式隐藏起来,只暴露必要的接口和功能给外部使用。这样做可以有效地降低组件的耦合度,提高了组件的可组合性和可复用性。

    4. 模拟原生组件: Shadow DOM 具有类似于原生组件的特性,例如封闭的样式范围、封闭的事件处理机制等,使得开发者可以更轻松地创建自定义的原生组件或控件,提供更好的用户体验和交互效果。

    5. 插件化开发: 使用 Shadow DOM 可以实现插件化开发的方式,将插件的内容和样式封装在独立的 DOM 子树中,然后将其插入到文档中的任意位置,从而实现更灵活和可扩展的应用开发。

  5. BEM(Block Element Modifier): BEM 是一种命名约定,用于给 HTML 元素添加类名,从而限定样式的作用范围。通过遵循 BEM 命名约定,可以确保每个组件或模块的样式都是独立的。官网地址 参考这篇文章。

相关推荐
Mintopia3 分钟前
Three.js 制作飘摇的草:从基础到进阶的全流程教学
前端·javascript·three.js
BillKu3 分钟前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js
红尘散仙22 分钟前
七、WebGPU 基础入门——Texture 纹理
前端·rust·gpu
jaywongX23 分钟前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue
红尘散仙24 分钟前
八、WebGPU 基础入门——加载图像纹理
前端·rust·gpu
佳腾_26 分钟前
【Web应用服务器_Tomcat】一、Tomcat基础与核心功能详解
java·前端·中间件·tomcat·web应用服务器
天天扭码42 分钟前
深入讲解Javascript中的常用数组操作函数
前端·javascript·面试
猿究院_xyz42 分钟前
跟着尚硅谷学vue-day5
前端·javascript·vue.js·前端框架·html
小杰love编程1 小时前
Django 入门指南:构建强大的 Web 应用程序
前端·django·sqlite
~heart将心比心1 小时前
chrome://inspect/#devices 调试 HTTP/1.1 404 Not Found 如何解决
前端·chrome