- A+
在现代前端开发中，CSS 的模块化管理至关重要。@import 虽然不如构建工具或 CSS-in-JS 流行，但在某些场景下仍具备实用价值，尤其是在按需加载和组合样式时。合理使用 @import 可以帮助你组织代码结构，实现轻量级的模块化控制。
理解 @import 的基本用法
@import 是 CSS 提供的规则，用于在一个样式表中引入另一个样式表。它必须放在文件顶部，在任何其他 CSS 规则之前。
@import url("base.css");
@import url("layout.css");
@import url("components/button.css");
这种方式可以将大型样式拆分为多个小文件，便于维护。例如，把重置样式、布局、组件、主题等分别存放，再通过主 CSS 文件统一导入。
实现按需加载：条件性引入
结合媒体查询，@import 支持条件加载，只在特定设备或屏幕尺寸下引入样式，减少不必要的资源请求。
立即学习“前端免费学习笔记（深入）”；
@import url("print.css") print;
@import url("mobile.css") screen and (max-width: 768px);
@import url("dark-theme.css") (prefers-color-scheme: dark);
这种写法适合为打印、移动端或深色模式单独定义样式，浏览器会根据条件决定是否下载对应文件，优化性能。
组合技巧：层级化与命名约定
为了提升可读性和可维护性，建议采用清晰的目录结构和命名方式：
Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。
78
查看详情
- 将样式拆分为功能模块（如
_variables.css、_mixins.css） - 使用前缀或目录区分类型（components、layout、pages）
- 主入口文件（如
main.css）负责聚合所有模块
示例：
/* main.css */
@import "themes/variables.css";
@import "base/reset.css";
@import "layout/grid.css";
@import "components/button.css";
@import "pages/home.css";
这样既保持了逻辑分离，又实现了集中管理。
注意性能与兼容性限制
@import 每引入一个文件就会发起一次额外 HTTP 请求，且是串行加载，可能影响页面渲染速度。尤其在嵌套使用时，性能下降更明显。
相比而言，现代工作流更推荐使用预处理器（如 Sass 的 @use 或 @import）或打包工具（Webpack、Vite）来合并 CSS，提前处理依赖关系。
如果必须使用原生 @import，应避免多层嵌套，并考虑将关键样式内联，非关键部分延迟加载。
基本上就这些。虽然 @import 功能有限，但在简单项目或特定需求中，配合好结构设计和媒体查询，依然能有效支持模块化与按需加载。关键是权衡灵活性与性能，选择最适合当前场景的方式。
