· 5 min read
核心观点:CSS 级联按"属性"算胜负,不是按"类名"合并。
- 裁决顺序:specificity → layer → 源码顺序,最后登场者赢
- 冲突点:同一属性只能保留一个值,类名再多也是同一个声明位
- 典型坑:layout.css 后加载的
.flex-col会把 utils.css 的.lg:flex-row改回去 - 回答"flex-col flex 能不能拆开":不能,CSS 不按类名分摊属性
- 推论:抢不同属性时互不干扰,按 reset/utilities/components 拆文件完全可行
- 排查路径:DevTools → Computed → 看属性右边列出哪些规则在抢