base/ 应存放设计变量、工具函数、基础排版规则和真正全局默认行为，而非仅重置样式；需分设 variables.css、mixins.css、typography.css，并慎用 reset.css。
base 目录该放什么，别把重置样式塞进 reset.css 里就完事
很多人建好 base/ 就往里丢 reset.css 或 normalize.css，以为万事大吉。其实 base/ 是整个 CSS 系统的“地基”，它得管住变量、工具函数、基础排版规则和真正全局生效的默认行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
base/variables.css放所有设计系统级变量（颜色、间距、字体大小），用:root声明，避免分散在各处 -
base/mixins.css存可复用的逻辑封装，比如@mixin flex-center，别写成带具体值的 class -
base/typography.css控制p、h1～h6、ul、blockquote的默认样式，注意行高、margin 和 font-family 继承链 - 慎用
reset.css：现代浏览器下更推荐normalize.css或极简的base/reset.css（仅清body margin和box-sizing）
components 目录别让文件名暴露实现细节，比如 button-primary.css
看到 button-primary.css 这种命名，基本可以判断这个组件目录迟早失控。它把视觉状态（primary）和语义（button）混在一起，后续加 button-outline、button-sm 就会无限膨胀，还容易和业务逻辑耦合。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个组件一个文件夹，如
components/button/，内部包含button.css（基础结构）、button.variants.css（状态类）、button.theme.css（主题覆盖，可选） - class 名保持语义化：
btn、btn--large、btn--disabled，而不是primary-btn - 用
@layer components（CSS @layer）统一管理层叠顺序，避免靠 !important 拼命提权 - 不直接在
components/下写页面专属样式，那是pages/或features/的事
pages 目录不是“页面独有样式”的垃圾桶，它只负责布局容器与路由级作用域
常见错误是把某个页面里所有按钮、卡片、表单样式全塞进 pages/dashboard.css，结果改个按钮样式要翻三个地方：base、components、pages —— 最后谁改的谁也说不清。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
pages/只定义容器级结构：比如.dashboard-layout的栅格、侧边栏展开逻辑、主内容区 max-width - 页面内复用的 UI 元素必须走
components/，哪怕只用一次；页面专属的微调用data-属性 + 后续选择器，例如[data-page="dashboard"] .btn--cta - 如果某页面需要临时覆盖组件样式，优先用
scoped（Vue/Svelte）或 CSS Modules，而不是在pages/里写强权重选择器 - 路径映射要清晰：
pages/user/profile.css对应/user/profile路由，别出现pages/user-profile.css这种模糊命名
为什么 utils 比 helpers 更合适，以及它不该装什么
叫 helpers/ 容易让人误以为可以塞 JS 工具函数或构建脚本，而 utils/ 在前端工程中已形成 CSS 专用语义共识。但它不是“其他都放不下”的收纳盒。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只放真正跨层级、无上下文依赖的原子类：
utils/spacing.css（.mt-4,.p-2）、utils/visibility.css（.sr-only,.hidden） - 禁用带业务含义的工具类，比如
.bg-dashboard-header或.text-error-message—— 这些属于 theme 或 component 变体 - 避免在
utils/里写媒体查询组合，如.md\:flex应由构建时生成（Tailwind 风格），手写请归入base/breakpoints.css - 如果项目用 PostCSS，
utils/下的文件适合配postcss-preset-env自动补全，别手动写 -webkit- 前缀
最常被忽略的一点：目录结构本身不解决样式污染问题。哪怕分得再细，只要 components/button.css 里写了 body { background: red }，整个体系就失效了。层级划分的前提，是每个文件真的只做它该做的事。
