CSS自定义属性应语义化命名（如--spacing-xs、--breakpoint-md）以统一维护；CSS Modules通过哈希类名隔离样式，布局组件须强制使用；@layer可分层管控多源CSS优先级，避免!important滥用。
怎么用CSS自定义属性替代重复的魔法值
硬编码颜色、间距、断点在多组件页面里会失控，改一个16px可能漏掉三处。用:root定义变量不是为了“高级”，是为让font-size和line-height保持比例关系、让--primary-color在按钮/标题/边框里真正同步。
实操建议：
- 只对语义明确的值提变量：比如
--spacing-xs（对应4px），别写--spacing-1这种数字编号 - 媒体查询断点也进变量：
--breakpoint-md: 768px，后续所有@media (min-width: var(--breakpoint-md))才可控 - 避免在组件内部重定义同名变量，除非是局部覆盖；全局变量一旦被
!important污染，调试成本翻倍
为什么CSS Modules比全局class更适合布局组件化
当你写.header时，根本不知道它会不会和第三方库或另一个团队的.header冲突。CSS Modules自动哈希类名，Header_title编译后变成Header_title__qQ2sA，彻底隔离。
实操建议：
- 布局组件（如
Layout.vue或AppLayout.tsx）必须用CSS Modules或CSS-in-JS，禁用global.css直接写.container - 需要穿透样式的场景（比如子组件想继承父布局的
max-width），用:global()包裹，但仅限真正必要的地方 - 不要把所有样式都塞进一个
Layout.module.css——按区块拆：比如Header.module.css、Sidebar.module.css，文件名即作用域
如何用@layer控制复杂页面的CSS优先级
当页面同时引入Tailwind、组件库、自定义主题、业务样式时，!important泛滥或覆盖失效是常态。@layer不是锦上添花，是唯一能理清“基础样式
实操建议：
- 在入口CSS里按顺序声明：
@layer base, layout, components, utilities - 所有布局相关规则（如
.main-grid、.sidebar-fixed）必须写在@layer layout块内 - Tailwind默认已用
@layer，你自己的@layer components会天然低于它的@layer base，但高于@layer utilities——这点不看清，text-lg就可能压不住你的font-size
import顺序错乱导致布局样式失效怎么办
CSS是顺序敏感的，import './Button.css'写在import './Layout.css'前面，Button的.btn就可能覆盖Layout的.container宽高设置，尤其当两者都用了width: 100%。
实操建议：
- 入口文件（如
main.tsx）中CSS导入严格按层：先base.css（重置、变量），再layout.css（栅格、容器），最后才是components/下的文件 - 禁止在组件内部
import全局布局CSS——组件只能依赖传入的class或CSS Props，否则形成隐式耦合 - Webpack/Vite里检查
style-loader是否启用了injectType: 'singleton'，否则HMR时样式会重复插入，造成权重异常
布局组件化真正的难点不在拆分，而在变量、层、顺序三者咬合——漏掉任意一环，display: grid就可能被某个没加@layer的div样式悄悄覆盖掉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
