css样式加载规范总结_从小项目到大型系统

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 延迟执行。