CSS中@import与堆叠样式表的区别及实际优势对比

加载机制差异（核心性能区别） #

• <link> 是HTML原生标签，浏览器会并行发起请求加载它指向的CSS文件，不会阻塞DOM的解析流程（除非设置特殊属性），能有效提升页面加载速度，减少“无样式内容闪烁（FOUC）”的概率。
• @import 是CSS内部规则，必须等当前CSS文件加载、解析完成后，才会去请求引入的其他CSS文件，属于串行加载，很容易拖慢页面渲染，尤其是嵌套多层@import时，性能问题会更明显。

使用灵活性差异 #

• <link> 支持通过media属性直接指定媒体查询，比如media="print"或者media="screen and (max-width: 768px)"，能轻松实现响应式场景下的样式按需加载；还可以通过JavaScript动态创建、删除<link>标签，实现更灵活的样式控制。
• @import 虽然也支持媒体查询（写法如@import url("mobile.css") screen and (max-width: 768px);），但它无法通过JS直接操作，只能修改CSS规则本身，灵活性远不如<link>。

兼容性差异 #

• <link> 从IE3开始就支持，几乎兼容所有浏览器，完全不用考虑老旧环境的问题。
• @import 要到IE5才被支持，虽然现在老旧浏览器的占比极低，但如果项目有极端兼容需求，<link>是更稳妥的选择。

代码维护性差异 #

• <link> 通常集中放在HTML的<head>区域，所有样式文件的引入关系一目了然，团队协作时能快速梳理项目的样式依赖，排查冲突也更方便。
• @import 分散在CSS文件内部，要是出现多层嵌套引入（比如A.css引入B.css，B.css又引入C.css），会让样式的依赖关系变得混乱，后期维护成本很高。

总结建议 #

日常开发优先用<link>，不管是性能、灵活性还是可维护性都更优；@import只适合一些特殊场景（比如依赖当前CSS变量的动态引入），或者作为老项目遗留代码的兼容手段，不推荐作为主要的样式引入方式。

内容的提问来源于stack exchange，提问作者fat penguin