17370845950

模块化CSS通过父级类选择器限定作用域以避免样式污染，如.user-card .title；推荐BEM命名、避免过度嵌套，并注意第三方组件的样式穿透问题。

在模块化开发中，CSS 样式只作用于当前模块，本质是避免样式污染，而“通过父级类选择器限定”是最常用、最直接的解决方式——给模块外层容器加一个唯一类名，所有内部样式都以此为前缀书写。

用唯一的父级类名包裹模块

这是前提。比如你的组件叫 user-card，就给它的根元素加上 class="user-card"：

  
用户信息
  
张三

所有样式都以父类为前缀书写

不再写 .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（慎用）