CSS文件名必须带.css后缀，统一用短横线分隔单词，体现一级职责，条件状态置于末尾，避免冗余前缀和过度拆分文件。
CSS文件名该不该带 .css 后缀
必须带。.css 是浏览器和构建工具识别样式表的硬性依据，省略会导致 link rel="stylesheet" 失效、Webpack/Vite 无法解析、HTTP 响应头缺失 Content-Type: text/css。开发时看似能“凑合”，上线后常在 CDN 或 Nginx 配置中暴露问题。
用下划线还是短横线分隔单词
统一用短横线（kebab-case），比如 header-layout.css、button-primary.css。下划线在 URL 中易被渲染为下划线样式干扰可读性；部分旧版 Windows 文件系统或 CI 工具对下划线路径有转义异常；更重要的是，所有主流 CSS 方法论（BEM、ITCSS）和构建工具（PostCSS 插件、Vite 的 glob 导入）默认按短横线做语义切分。
文件名里要不要体现作用域或层级
要，但只体现一级职责，不嵌套过深。例如：form-validation.css 比 form.css 更明确，而 components-form-validation.css 就冗余——目录结构已承担层级表达。常见有效前缀包括：base-（重置/通用）、layout-（栅格/容器）、theme-（配色变量）、print-（媒体查询专用）。避免用 global- 或 common- 这类空泛词。
如何命名响应式或主题专用 CSS
把条件写在末尾，用短横线连接主名与状态，例如：nav-mobile.css、card-dark.css、table-print.css。不要倒置（如 mobile-nav.css），否则按字母排序时同类文件会分散；也不要加 @ 或下划线（如 nav@mobile.css），这类符号在某些 shell 环境或 Git 路径中需额外转义。顺便提醒：同一功能的不同变体尽量放在同一文件内用 @media 或 :is([data-theme="dark"]) 控制，而非拆成多个文件——文件粒度太碎会显著增加 HTTP 请求或 bundle 分析难度。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的不是命名规则本身，而是命名和实际内容是否一致。改了 button-legacy.css 里的样式，却忘了同步更新 button-modern.css 的对应逻辑，这种错位比名字起得丑更难调试。
