根本解法是用带明确语义的类名和合理命名约定（如BEM）精准控制样式范围，避免宽泛选择器导致的样式污染。
用太宽泛的选择器（比如 div、p、ul li）容易误中其他模块，造成样式“越界”，这就是常说的样式污染。根本解法不是靠 !important 压制，而是从选择器设计源头收紧范围——用带明确语义的类名，配合合理的命名约定。
只对需要的元素显式加类，不依赖层级推导
避免写 .header ul li a 这类深度嵌套选择器。它不仅脆弱（父级一改就失效），还极易影响同结构的其他区域。改为给目标链接直接加一个功能类，比如 class="header-nav-link"，然后用 .header-nav-link 精准控制。
- html 中主动声明意图：
首页 - css 只写：
.header-nav-link { color: #333; text-decoration: none; } - 这样哪怕页面里有十个
ul li a，也只动这一个
采用 BEM 或语义化命名规范
类名本身要能说明“这是谁、在哪儿、干什么”。推荐 BEM（Block__Element–Modifier）或简化版语义命名，例如：
-
product-card（模块名，代表一个商品卡片整体） -
product-card__title（内部标题，属于该模块） -
product-card--featured（变体，高亮推荐款）
这类名字天然隔离：就算其他地方也有 title，只要没加 product-card__ 前缀，就不会被波及。
立即学习“前端免费学习笔记（深入）”；
禁用通配符和标签选择器做全局重置
像 * { margin: 0; padding: 0; } 或 button { appearance: none; } 看似省事，实则埋雷——它们无差别作用于全站所有按钮、所有元素，后续任何第三方组件或新模块都可能被意外重置。
- 重置应按需进行，例如只写
.btn { margin: 0; padding: 8px 16px; } - 或用 CSS 层叠上下文隔离：在模块容器上设
all: unset;，再逐个恢复必要属性 - 现代项目可借助
reset.css或normalize.css替代手写通配重置
基本上就这些。类选择器不是“多写几个字”的负担，而是给样式划清责任边界的契约。命名清楚了，范围自然就干净了。