用组合选择器明确样式作用边界是最直接解法，如以模块类名（.user-card）为父级锚点，采用BEM命名（.search-form__input），禁用全局标签样式，慎用all: unset，优先子选择器>控制层级，用:where()降低权重干扰。
同一模块内样式覆盖混乱，核心原因是选择器权重冲突或作用范围过大。用组合选择器（如 .module .header、.module > .item）明确限定样式生效边界，是最直接有效的解法。
用模块类名做父级锚点
给整个模块加一个唯一、语义化的类名（如 .user-card），所有内部样式都以此为前缀。避免直接写 .title 或 h2，改用 .user-card .title 或 .user-card h2。这样即使其他模块也有 .title，也不会互相干扰。
- 推荐命名：模块名 + 元素名，如
.search-form__input（BEM 风格更稳） - 禁止在模块内写全局标签样式（如
button { ... }），除非你确定它只在此模块出现且无需复用 - 如果模块嵌套深，优先用子选择器
>控制层级，比如.modal > .footer > button比.modal .footer button更精准
警惕隐式继承和通配符污染
模块内某些样式可能被祖先元素的 color、font-size 或 * { ... } 影响。不要依赖默认继承，对关键样式显式重置。
- 在模块根选择器里加
all: unset;（慎用，需重设必要属性）或至少重置box-sizing、margin、padding - 避免在模块 CSS 中写
html、body或*规则，它们会穿透模块边界 - 字体、颜色等基础样式建议统一通过 CSS 自定义属性（
--text-primary）在模块根上定义，子元素用var(--text-primary)调用
用 :where() 或 :is() 降低权重干扰
当需要多个选择器匹配同一组元素（比如不同状态下的按钮），又不想拉高权重导致难覆盖，可用 :where() 包裹：
立即学习“前端免费学习笔记（深入）”；
-
:where(.btn, .btn-primary, .btn--large) { padding: 8px 16px; }—— 权重恒为 0 - 比写三个独立规则更简洁，也比用
!important健康得多 - 注意
:where()不支持伪元素和部分伪类，简单状态切换足够用
基本上就这些。组合选择器不是炫技，是给样式划清楚“谁管谁”的责任田。写的时候多问一句：“这个样式，是不是只该在这里起作用？” 答案是“是”，那就把它锁进模块壳子里。
