CSS 引入顺序必须为「重置→基础→组件→页面→主题」，禁用 @import，采用同步加载；class 需带作用域前缀如。c-button；媒体查询与暗色模式须内联至对应组件样式中。
样式表引入顺序必须严格遵循「重置 → 基础 → 组件 → 页面 → 主题」
浏览器 按 标签出现顺序解析 CSS，顺序错乱会导致样式被意外覆盖或重置失效。比如 normalize.css 放在业务组件样式之后，就无法真正归一化 button 的默认边距。
- 重置类（
reset.css/normalize.css）必须最先加载 - 基础样式（
variables.css、typography.css）紧随其后，不能依赖任何组件类名 - 组件样式（
Button.css、Modal.css）需基于基础变量编写，禁止硬 编码 颜色 / 尺寸 - 页面级样式（
home.css）仅用于布局组合，不定义新 class 或修改组件内部结构 - 主题样式（
theme-dark.css）最后加载，用[data-theme="dark"]等 属性选择器 做局部覆盖
避免 @import，全部用 同步加载
@import 会阻塞后续资源下载，且无法并行解析。Webpack/Vite 构建时若配置了 css-loader 的 importLoaders，也可能导致 @import 被错误提升或重复注入。
- 开发期看到
@import url("base.css");就该立刻替换为 - 构建 工具 中禁用
postcss-import插件（除非明确需要逻辑条件导入） - 大型系统里，CSS 文件超过 5 个时，用
rel="preload"提前提示浏览器获取关键样式：
class 命名必须带 作用域 前缀，禁止全局污染
没有命名空间的 .header、.btn 在微 前端 或多团队协作中极易冲突。CSS Modules 或 CSS-in-JS 虽能解决，但纯 CSS 项目仍需靠约定。
- 小项目可用 BEM：如
.product-card__title、.product-card--featured - 中大型系统强制使用命名空间前缀：
.u-px2（工具类）、.c-button（组件）、.l-grid（布局）、.p-home（页面） - 禁止在 CSS 中写
body {font-family: ……}这类全局规则，统一收口到base.css并加:where()降低优先级：:where(body) {font-family: var(--font-sans); }
媒体查询和暗色模式必须内联到对应样式块，不单独抽离
把所有 @media (prefers-color-scheme: dark) 集中写在 theme-dark.css 里看似整洁，实则破坏样式局部性——组件变更时容易漏改对应主题规则，也增加维护心智负担。
立即学习 “ 前端免费学习笔记（深入）”；
- 每个组件 CSS 文件里，直接在
.c-button规则后写它的暗色适配：.c-button {background: var(--color-bg-primary); } @media (prefers-color-scheme: dark) {.c-button { background: var(--color-bg-primary-dark); } } - 响应式断点统一定义在
variables.css，用var(--breakpoint-md)替代魔法数字 - 避免嵌套过深的媒体查询，单个文件里
@media不超过 3 层，否则提取成独立变体类（如.c-button--mobile）
大型系统里最常被忽略的是「样式加载完成时机」——DOMContentLoaded 触发时，CSS 可能还没解析完，此时 JS 拿到的 getComputedStyle 是初始值。真要依赖样式计算结果，得监听 document.fonts.ready 或用 requestIdleCallback 延迟执行。
