CSS应按功能分层切分（基础/布局/组件/主题/页面层），禁用@import改用@use或postcss-import，通过BEM+stylelint强制命名规范，主题切换依赖CSS变量而非多文件。
怎么拆CSS文件才不会后期失控
按功能维度切分，比按页面切分靠谱得多。大型项目里，一旦按home.css、user.css这种页面名组织，很快就会出现样式互相覆盖、复用困难、改一处崩三处的问题。
真正可持续的结构是分层+分类：基础层（重置、变量、工具类）、布局层（栅格、容器、定位）、组件层（按钮、卡片、表单）、主题层（暗色模式、品牌变体）、页面层（仅含页面级组合逻辑，不写具体样式）。
-
_reset.css和_variables.css必须放在最前，否则后续所有var(--color-primary)都会 fallback 到浏览器默认值 - 组件文件名统一用
component-name.css（如button.css），避免btn.css这类缩写，后期搜索和 IDE 跳转更稳 - 页面层只允许出现
.page-home .card这类组合选择器，禁止写新的.card规则——否则就等于在重复定义组件
为什么 @import 在现代项目里基本该禁用
@import 会阻塞并串行加载，哪怕你只是想引入一个 _mixins.css，它也会让整个 CSS 构建链卡在那等它下载完解析完。Webpack/Vite 的 @import 处理也常绕过缓存，导致 HMR 失效或热更新延迟。
真实场景中，90% 的 @import 都能被预处理器（Sass/Less）的 @use 或构建工具的 postcss-import 替代，后者支持静态分析、作用域隔离、tree-shaking。
立即学习“前端免费学习笔记（深入）”；
- Sass 中优先用
@use "base/variables" as *;，而不是@import "base/variables";，前者能避免变量冲突，且编译时可校验未使用变量 - Vite 项目若仍用
@import，需确认postcss-import插件已启用，否则@import "./utils/clearfix.css"会被原样输出到 CSS 文件里，浏览器直接报404 - 所有
@import路径必须是相对路径或别名路径（如@import "@/styles/mixins.css"），绝对路径（/src/styles/...）在某些构建配置下会找不到
如何让 CSS 类名既语义化又不怕冲突
靠 BEM 是个起点，但大型项目光靠 block__element--modifier 不够。真正关键的是把命名约束变成工程约束——用工具固化，而不是靠人自觉。
比如 button__text--large 看似合理，但如果团队有人写成 btn__txt--lg，或者漏掉双下划线，后续查找、替换、自动化提取都麻烦。
- 用
stylelint-selector-bem-pattern插件强制校验 BEM 格式，CI 流水线里跑不过就拒绝合并 - 组件级 CSS 文件开头加注释块，明确声明作用域边界：
/* @scope button: [data-component="button"] */，方便后续用 PostCSS 提取 scoped 片段 - 避免在类名里塞状态值，比如不用
card--is-loading，改用card[data-loading]，这样 JS 控制时只需el.setAttribute('data-loading', '')，不污染 classList
主题切换时 CSS 文件怎么组织才不炸锅
别搞多套独立 CSS 文件（light.css + dark.css），加载时机、缓存失效、JS 切换时的 FOUC（闪白）全都是坑。真正轻量可控的方式是「一套源码，多套变量」。
核心思路是把颜色、间距、阴影这些可变项抽成 CSS 自定义属性，在根节点动态切换 :root 下的值，其余所有样式都基于这些变量编写。
- 主题变量统一收口在
_theme-vars.css，里面只写:root { --color-bg: #fff; }，不写任何选择器 - 深色模式切换不要靠 JS 改
document.body.className，而是用document.documentElement.style.setProperty('--color-bg', '#111')，避免重排重绘 - 如果必须支持 IE11，就用
CSS Custom Properties Polyfill，但注意它无法动态响应setProperty，只能靠 class 切换 + 预编译多份 CSS，这时建议用构建时生成，而非运行时请求
最常被忽略的一点：CSS 变量不是万能的，background-image: url(var(--icon-path)) 是无效语法，这类资源路径得用构建时替换（如 PostCSS 的 postcss-advanced-variables）或 JS 注入 style 标签。
