模块化CSS通过父级类选择器限定作用域以避免样式污染，如.user-card .title；推荐BEM命名、避免过度嵌套，并注意第三方组件的样式穿透问题。
在模块化开发中，CSS 样式只作用于当前模块，本质是避免样式污染，而“通过父级类选择器限定”是最常用、最直接的解决方式——给模块外层容器加一个唯一类名，所有内部样式都以此为前缀书写。
用唯一的父级类名包裹模块
这是前提。比如你的组件叫 user-card，就给它的根元素加上 class="user-card"：
<div class="user-card"> <h3 class="title">用户信息</h3> <p class="desc">张三</p> </div>
所有样式都以父类为前缀书写
不再写 .title { ... }，而是写 .user-card .title { ... }。这样样式只会匹配到 user-card 内部的 title，不会影响其他模块里同名的 title：
.user-card .title {
font-size: 18px;
color: #333;
}
.user-card .desc {
color: #666;
margin-top: 4px;
}
注意嵌套层级与命名一致性
- 避免过度嵌套，如
.user-card .content .info .title—— 既难维护，也易被其他样式意外覆盖 - 推荐用 BEM 风格增强可读性：
.user-card__title、.user-card__desc，再配合父类限定：.user-card .user-card__title - 如果用 CSS Modules 或 Vue/React 的 scoped style，工具会自动加哈希类名，原理也是父级限定，只是由构建工具完成
警惕全局样式“穿透”问题
某些情况（如第三方组件、深层子组件）可能需要强制限定范围：
立即学习“前端免费学习笔记（深入）”；
- Vue 中用
:deep(.el-button)处理 scoped 下的子组件样式 - React 中可用 CSS-in-JS 的
cx或 styled-components 的嵌套写法：& .button { ... } - 纯 CSS 中，确保父类名足够特异（不与其他模块重复），必要时加
!important（慎用）
