CSS全局与局部样式怎么平衡不污染
2026-02-23 08:32:39
0浏览
收藏
本文深入探讨了前端开发中CSS全局与局部样式冲突这一顽疾，指出问题根源并非样式数量过多，而在于规则作用域的失控——从全局重置样式意外覆盖组件表现，到CSS Modules类名哈希碰撞、第三方UI库样式入侵、Tailwind动态类名失效，本质都是缺乏明确的边界意识；文章强调真正可靠的解法不是依赖工具自动隔离，而是通过根容器限定全局样式作用域、强化CSS Modules命名唯一性、优先采用UI库官方定制机制、显式声明Tailwind扫描路径等“手动划界+留痕验证”的务实策略，让每条CSS规则都清晰归属其应生效的上下文。
全局样式引入后局部组件样式被意外覆盖
CSS 全局样式（比如 reset.css 或 normalize.css）一加，某些 React/Vue 组件的默认边距、字体大小就变了，甚至按钮点击态消失——不是组件写错了，是全局规则太“热心”。
- 根本原因是：全局 CSS 里用了低特异性但高影响范围的选择器，例如
button { padding: 0; }或* { box-sizing: border-box; }，它会穿透到所有组件内部 - Vue 的
