@import 因同步阻塞加载、无法并行、不支持懒加载、构建工具中失去按需灵活性、在 中无效等缺陷被弃用，推荐改用自定义属性+:is()、postcss-import 构建时内联或 class/data-属性组合复用。
为什么 @import 在现代 CSS 工程里越来越不推荐
因为它的加载是同步阻塞的，浏览器必须等被导入的文件完全下载、解析完，才会继续处理后续样式。哪怕只在末尾写一个 @import url("reset.css");，也会拖慢整个页面的样式构建流程。
- 它无法并行加载：多个
@import会串行请求，而<link rel="stylesheet">可并行 - 它不支持媒体查询条件的懒加载（比如
@import url("print.css") print;仍会触发初始网络请求） - Webpack/Vite 等工具默认把
@import当作静态依赖提前打包，反而失去按需加载灵活性 - 在
<style></style>标签内用@import会被浏览器视为“无效位置”，直接忽略（规范要求只能在样式表开头）
CSS 自定义属性 + :is() 是更轻量的复用方案
比起靠文件拆分来复用，直接在单个 CSS 文件里用语义化自定义属性管理颜色、间距、圆角等基础值，配合 :is() 统一作用域，既避免请求开销，又保留维护性。
-
--color-primary: #007bff;定义一次，全文件可用；修改主题只需改变量值 -
button, .btn, [role="button"] { background-color: var(--color-primary); }比分散写三处更可控 -
:is(.card, .panel) .title { font-size: 1.25rem; }替代重复选择器，减少冗余 - 注意：IE 不支持
:is()和自定义属性，若需兼容，得用 PostCSS 插件降级或换方案
真要拆文件？用构建工具的 postcss-import 而不是原生 @import
原生 @import 是运行时行为，而 postcss-import 是构建时内联——所有 @import 语句在打包阶段就被替换成实际内容，最终输出一个无 @import 的扁平 CSS 文件。
- 配置简单：
postcss.config.js加一行require('postcss-import') - 支持嵌套导入、别名路径（如
@import "base/variables.css";），且能正确解析相对路径 - 不会产生额外 HTTP 请求，也不受加载顺序影响
- ⚠️ 注意：如果误把
postcss-import放在autoprefixer后面，会导致变量未展开就被压缩，生成无效 CSS
组件级样式复用该用什么？别碰 @import，用 class 组合和 data- 属性
基础 UI 组件（按钮、输入框、卡片）的样式复用，本质是「类名契约」，不是文件引用。强行用 @import 拆出 button.css，反而让使用者必须记住导入路径和顺序。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<button class="btn btn--primary btn--large"></button>，样式由单一 CSS 文件统一提供 - 需要变体控制时，用
data-size="large"配合[data-size="large"] { ... }，比维护一堆@import更灵活 - 如果用 CSS-in-JS 或 Scoped CSS（Vue/Svelte），就更不该在样式里再塞
@import—— 构建工具已负责依赖收集 - 真正容易被忽略的是：多人协作时，
@import路径写相对还是绝对？谁负责更新基础文件？这些问题都会变成隐性维护成本
