能否将CSS文件作为预制件在其他CSS文件中调用以优化代码？

一、原生CSS实现跨文件引用 #

直接用CSS原生的@import规则就能在一个CSS文件里引入另一个，完全不用修改HTML，完美契合你保持HTML简洁的需求。

用法很简单，必须把@import写在当前CSS文件的最开头（所有其他样式规则之前），语法示例如下：

/* 主样式文件 main.css */
@import url('box-prebuilt.css'); /* 引入预制盒子样式文件 */

/* 下面写你的自定义样式 */
.container {
  margin: 0 auto;
  width: 1200px;
}

注意事项：如果@import放在其他样式代码之后会被浏览器忽略；原生@import会发起额外HTTP请求（现代浏览器会并行加载，但还是不如合并文件高效），若项目规模较大，后续可考虑用构建工具把多个CSS合并成单个文件。

二、对比：把样式写在HTML里作为预制件的优劣 #

如果把预制样式写在HTML的<style>标签里，虽能直接通过class引用，但缺点十分明显：

• 违背HTML结构与CSS样式分离的原则，会让HTML文件臃肿，不符合你追求简洁的习惯；
• 预制样式仅能在当前HTML文件复用，换页面需重复复制代码，复用性远不如独立CSS文件；
• 后期维护麻烦，修改样式得去HTML中查找，远不如集中在CSS文件里管理清晰。

所以对你而言，把预制样式放在独立CSS文件，再用@import引入是更合适的方案。

进阶优化（可选） #

若想进一步提升效率、减少HTTP请求，可使用CSS预处理器（如Sass、Less），它们的@import会在编译阶段就将多个CSS文件合并为一个，性能优于原生@import，还支持变量、混合宏等更强的复用功能，适合中大型项目。

内容的提问来源于stack exchange，提问作者Will Brandi