使用BEM、css Modules、Shadow dom、vue scoped和命名空间可有效划分CSS作用域。1. BEM通过块_元素_修饰符命名减少冲突；2. CSS Modules将类名编译为唯一标识实现局部作用域；3. Shadow DOM创建独立样式环境，隔离内外样式影响；4. Vue的scoped属性为组件节点添加唯一属性限定样式范围；5. 手动添加模块前缀如.user-、.order-划分边界。方案选择需结合技术栈与项目复杂度，核心是提前规划避免样式覆盖。
在现代前端开发中，多个模块共存于同一页面时，CSS 样式容易发生冲突。比如两个模块都使用了 .btn 类名，但样式需求不同，就会互相覆盖。要避免这类问题，关键在于控制 CSS 的作用域，让每个模块的样式彼此隔离。以下是几种实用的 CSS 作用域划分策略。
1. 使用 BEM 命名规范
BEM（Block Element Modifier）是一种命名约定，通过类名本身表达结构关系，降低命名冲突概率。
规则示例：
-
.card：块（Block） -
.card__title：元素（Element），属于 card -
.card--large：修饰符（Modifier），表示变体
这种命名方式让样式天然具有模块归属感，即使全局作用域也不会轻易冲突。
立即学习“前端免费学习笔记（深入）”；
2. CSS Modules 实现局部作用域
CSS Modules 是构建工具（如 webpack）支持的功能，它将 CSS 类名编译为唯一标识，确保局部作用域。
例如，一个按钮模块的样式文件 Button.module.css：
.primary { background: blue; color: white; }在 react 组件中引入：
import styles from './Button.module.css'; // 使用时：<button className={styles.primary}>提交</button>构建后，styles.primary 会被转为类似 Button_primary__abc123 的唯一类名，避免全局污染。
3. 利用 Shadow DOM 隔离样式
Shadow DOM 是 Web Components 的一部分，能创建独立的 DOM 子树，其内部样式默认不泄露，外部样式也不影响内部。
适合高度封装的组件，比如自定义元素：
const shadow = element.attachShadow({ mode: 'open' }); shadow.innerhtml = ` <style>span { color: red; }</style> <span>只在这个 shadow 内生效</span> `;这种方式提供了最强的样式隔离，但使用场景相对受限，适合独立组件库或微前端中的隔离容器。
4. 使用 scoped 属性（Vue 中常用）
在 Vue 单文件组件中，可以通过 <style scoped> 让样式仅作用于当前组件。
<template> <div class="example">Hello</div> </template> <style scoped> .example { color: green; } </style>编译后，Vue 会为组件节点添加唯一属性（如 data-v-f3f3eg9），并重写 CSS 选择器，实现作用域限定。
5. 动态添加前缀或命名空间
对于不使用构建工具的项目，可以手动为不同模块的样式添加命名空间前缀。
例如：
- 用户模块：
.user-form、.user-modal - 订单模块：
.order-list、.order-item
通过明确的前缀划分模块边界，减少误覆盖风险。
基本上就这些。选择哪种策略取决于技术栈和项目复杂度。BEM 简单通用，CSS Modules 适合现代框架，Shadow DOM 提供强隔离，而 Vue 的 scoped 和命名空间则是轻量级好用的方案。关键是提前规划，避免样式“谁都能改，谁都怕改”。