@import用于CSS中导入样式表，实现模块化管理，语法为@import "file.css"或@import url("file.css")并可加媒体查询，需置于文件开头。
在CSS中，@import 是一种用于从一个样式表中导入另一个样式表的规则。它可以帮助你将样式拆分为多个文件，实现样式模块化管理，使项目结构更清晰、更易于维护。
基本语法
@import 必须写在CSS文件的最前面（位于任何其他规则之前），其基本语法如下：
@import "styles/base.css";@import url("components/button.css");
@import url("layout/header.css") screen and (min-width: 768px);
你可以使用引号或 url() 函数来指定路径，两者效果相同。此外，还可以为导入的样式表设置媒体查询条件，实现按需加载。
实现样式模块化
通过将不同功能或组件的样式分离到独立文件中，可以提升代码可读性和复用性。例如：
立即学习“前端免费学习笔记（深入）”；
- base.css：重置样式、通用类
- typography.css：字体、段落样式
- buttons.css：按钮组件样式
- layout.css：页面布局相关样式
- theme.css：主题配色方案
主样式文件（如 style.css）可通过 @import 统一引入：
@import "base.css";
@import "typography.css";
@import "buttons.css";
@import "layout.css";
@import "theme.css";
注意事项与局限性
虽然 @import 有助于组织代码，但也存在一些性能和兼容性问题：
- 每使用一次 @import，浏览器就会发起一次额外的HTTP请求（在旧浏览器中），可能影响加载速度
- @import 无法被异步加载，会阻塞页面渲染
- 不能在HTML的 <style> 标签中动态控制，灵活性不如 <link> 标签
- 必须放在CSS文件开头，否则会被忽略
因此，在现代前端开发中，通常推荐使用构建工具（如Webpack、Vite）配合预处理器（Sass/SCSS 的 @use 或 @import）或原生 CSS 模块来实现更高效的模块化，而不是依赖原生CSS的 @import。
替代方案建议
对于大型项目，考虑以下方式替代原生 @import：
- 使用 HTML 中的 <link rel="stylesheet"> 并行加载多个CSS文件
- 采用预处理器（如 SCSS）的模块系统：@use 'variables';
- 利用现代构建工具合并压缩CSS，减少请求数
基本上就这些。@import 适合简单场景下的样式拆分，但在追求性能和工程化的项目中，应结合工具链选择更优方案。
