在前端项目开发过程中，随着业务模块不断增加，全局css样式很容易出现命名重复、样式相互覆盖的问题，控制不同模块使用独立css样式成为提升项目可维护性的重要需求，合理的css作用域划分策略可以从根源上避免这类问题。
常见css作用域划分策略
1. BEM命名规范
BEM是块、元素、修饰符的缩写，通过约定严格的命名规则，让每个样式类名都和对应模块绑定，从命名层面实现样式作用域隔离。其核心规则是：块名__元素名--修饰符名，类名之间用双下划线或双横线连接，避免和其他模块的样式冲突。
例如一个卡片模块的结构如下：
<div class="card"> <div class="card__header">卡片标题</div> <div class="card__content card__content--active">卡片内容</div> </div>
对应的css样式写法为：
/* 块样式 */
.card {
width: 300px;
border: 1px solid #eee;
border-radius: 8px;
}
/* 元素样式，通过双下划线关联块 */
.card__header {
padding: 16px;
font-size: 18px;
border-bottom: 1px solid #eee;
}
/* 修饰符样式，通过双横线表示状态 */
.card__content--active {
color: #1677ff;
font-weight: bold;
}
这种方式的优点是兼容性好，不需要额外的编译工具，缺点是命名比较长，需要团队严格遵守命名规范，否则还是可能出现冲突。
2. CSS Modules
CSS Modules是一种模块化的css解决方案，通过构建工具（如webpack、vite）对css类名进行编译，将类名转换成唯一的哈希值，从而实现模块级别的样式隔离。默认情况下，CSS Modules导出的类名只在当前模块生效，不会污染全局。
首先需要在构建工具中开启CSS Modules支持，以vite为例，配置如下：
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
css: {
modules: {
// 自定义类名编译后的格式
localsConvention: 'camelCaseOnly'
}
}
})
然后编写模块对应的css文件，命名为module.module.css：
/* card.module.css */
.card {
width: 300px;
border: 1px solid #eee;
border-radius: 8px;
}
.header {
padding: 16px;
font-size: 18px;
border-bottom: 1px solid #eee;
}
.active {
color: #1677ff;
font-weight: bold;
}
在js模块中引入并使用：
// Card.js
import styles from './card.module.css'
function Card() {
return `
<div class="${styles.card}">
<div class="${styles.header}">卡片标题</div>
<div class="${styles.active}">卡片内容</div>
</div>
`
}
编译后，.card类名会被转换成类似_card_1a2b3的唯一字符串，只在当前模块生效，不会和其他模块的.card类名冲突。
3. Vue scoped方案
如果使用Vue框架开发，可以使用Vue单文件组件中的scoped属性实现样式隔离。Vue会在编译阶段给当前组件的所有DOM元素添加一个唯一的属性，比如data-v-123456，同时给样式规则添加对应的属性选择器，让样式只在当前组件内生效。
使用方式很简单，在<style>标签上添加scoped属性即可：
<template>
<div class="card">
<div class="header">卡片标题</div>
<div class="content">卡片内容</div>
</div>
</template>
<script>
export default {
name: 'Card'
}
</script>
<style scoped>
.card {
width: 300px;
border: 1px solid #eee;
border-radius: 8px;
}
.header {
padding: 16px;
font-size: 18px;
border-bottom: 1px solid #eee;
}
.content {
padding: 16px;
}
</style>
编译后的DOM结构会变成：
<div class="card" data-v-123456> <div class="header" data-v-123456>卡片标题</div> <div class="content" data-v-123456>卡片内容</div> </div>
对应的样式会变成：
.card[data-v-123456] {
width: 300px;
border: 1px solid #eee;
border-radius: 8px;
}
.header[data-v-123456] {
padding: 16px;
font-size: 18px;
border-bottom: 1px solid #eee;
}
.content[data-v-123456] {
padding: 16px;
}
这种方式的优点是使用简单，不需要额外的命名规则，缺点是针对第三方组件的样式修改可能需要使用深度选择器::v-deep才能生效。
4. Shadow DOM
Shadow DOM是Web Components标准的一部分，它允许将一个隐藏的、独立的DOM树附加到某个元素上，这个DOM树的样式和外部完全隔离，不会被外部样式影响，也不会影响外部样式。
使用示例如下：
// 创建一个自定义元素
class CardElement extends HTMLElement {
constructor() {
super()
// 创建shadow root
const shadow = this.attachShadow({ mode: 'open' })
// 添加样式
const style = document.createElement('style')
style.textContent = `
.card {
width: 300px;
border: 1px solid #eee;
border-radius: 8px;
}
.header {
padding: 16px;
font-size: 18px;
border-bottom: 1px solid #eee;
}
`
// 添加DOM结构
const container = document.createElement('div')
container.className = 'card'
container.innerHTML = `
<div class="header">卡片标题</div>
<div class="content">卡片内容</div>
`
shadow.appendChild(style)
shadow.appendChild(container)
}
}
// 注册自定义元素
customElements.define('my-card', CardElement)
在页面中使用<my-card></my-card>标签时，内部的样式完全独立，和外部的.card、.header样式不会互相干扰。不过Shadow DOM的兼容性稍弱，且和现有框架的集成需要额外处理。
不同策略的选择建议
可以根据项目场景选择合适的方案：
- 如果是小型项目或者需要兼容老浏览器，优先选择BEM命名规范，成本低且兼容性好。
- 如果是使用React、Vue等框架开发的中大型项目，优先选择CSS Modules，灵活性强，支持跨框架使用。
- 如果是纯Vue项目，直接使用Vue scoped方案，开发效率最高。
- 如果是开发通用组件库，需要完全隔离样式，可以考虑Shadow DOM方案。
实际项目中也可以组合使用多种方案，比如全局通用样式用BEM规范，业务模块样式用CSS Modules，既能保证样式隔离，又能提升开发效率。