主题 CSS 怎么组织：一个文件写完还是拆成模块，我们的取舍

单文件 CSS 写到 3000 行以后，找一条规则要看半天。但拆成十几个文件，请求数又上去了。

先说结论。

开发时拆，上线后合并。

拆的粒度按「页面区域」而不是按「技术职责」。别搞 base/layout/component/utility 那套，主题没那么大。我通常分四块：base（重置、变量、字体）、layout（容器、侧栏、栅格）、component（导航、卡片、评论、分页）、page（首页、列表页、文章页各自的独特样式）。

为什么按区域分。

因为改需求的时候，是按区域进来的。用户说「文章页底部太挤」，你直接开 page/single.css 就行。按职责分的话，得同时翻 layout 和 component 两个文件。

命名。

前缀。所有 class 加统一前缀，比如 fh-。这样跟插件、跟主题自带的 third-party 样式不会撞。

不加前缀是麻烦之源。我见过主题里直接写 .post .item .content，插件里也写，然后互相覆盖，查半天。

层级也不宜太深。BEM 那套 block__element--modifier 规范是规范，但写起来长。我的做法是扁平化为主，只有在确实需要区分作用域时才加一层父级。

变量先定下来。

colors、字号、圆角、间距，全放 :root 里。这样改配色不用动 500 行，改几行变量就换皮。

变量命名别用具体值命名。--blue 后面可能变成红色，名字就离谱了。用语义名：--color-primary、--color-text-muted、--color-border。

这套做完，暗色模式几乎不用额外工作——覆盖变量就够了。

响应式断点。

别设太多。三个就够：手机（<768）、平板（768–1024）、桌面（>1024）。写的时候用 min-width 从窄往宽写，合并规则更容易。

所有断点值也定义成变量，虽然 CSS 变量在 media query 里用不了，但在预处理器里可以，或者至少在注释里标清楚。

合并和压缩。

上线前把四个 css 合并成一个，压缩，加版本号。合并工具用什么不重要，别手写就行。

压缩这一步有代价：调试时得对着压缩后的文件看行号。所以在主题配置里留个开关，开发态输出未压缩版本，上线再关。

你主题的 CSS 现在是单文件还是拆开的？大概多少行？