在前端项目开发中，我们经常会同时使用成熟的CSS框架和项目专属的自定义样式，合理的引入方式能让开发更高效，也能减少样式冲突问题。下面先介绍常见的CSS引入方式，再讲解组合加载的最佳实践。
常见的CSS引入方式
1. 外部样式表引入
这是最常用的引入方式，通过<link>标签将外部的CSS文件加载到HTML页面中，适合引入框架样式和自定义的公共样式。外部样式表的优势是样式可以复用，修改时只需要改一个文件，所有引用该文件的页面都会同步更新。
引入框架样式的示例代码如下：
<!-- 引入Bootstrap框架样式 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
2. 内部样式表
内部样式表是将CSS代码直接写在HTML页面的<style>标签内，通常放在<head>区域，适合存放当前页面独有的少量样式，不建议用来写大量自定义样式，否则会增加HTML文件的体积，不利于维护。
内部样式表示例：
<head>
<style>
/* 当前页面独有的标题样式 */
.page-title {
font-size: 24px;
color: #333;
}
</style>
</head>
3. 内联样式
内联样式是直接写在HTML元素的style属性中的样式，优先级最高，但是复用性最差，一般只用于临时调整单个元素的样式，不建议在正式项目中大量使用。
内联样式示例：
<div style="width: 100px; height: 100px; background-color: #f0f0f0;">内联样式元素</div>
框架样式与自定义样式的组合加载方法
组合加载的核心原则是先加载框架样式，再加载自定义样式，因为CSS的层叠规则是同优先级的样式后加载的会覆盖先加载的，这样自定义样式可以正常覆盖框架的默认样式，不会出现样式被框架覆盖的问题。
标准组合加载示例
假设我们使用Bootstrap框架，同时有自己的自定义样式文件custom.css，正确的引入顺序如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式组合加载示例</title>
<!-- 第一步：引入框架样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
<!-- 第二步：引入自定义公共样式 -->
<link rel="stylesheet" href="css/custom.css">
<!-- 第三步：如果有当前页面独有的内部样式，放在最后 -->
<style>
.custom-btn {
border-radius: 8px;
}
</style>
</head>
自定义样式覆盖框架样式的示例
如果我们需要修改Bootstrap默认的按钮样式，只需要在custom.css中写对应的样式即可，因为custom.css后加载，会覆盖框架的默认样式：
/* custom.css 内容 */
/* 覆盖Bootstrap的默认按钮样式 */
.btn-primary {
background-color: #ff6b6b;
border-color: #ff6b6b;
}
/* 新增自定义样式 */
.card-shadow {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
组合加载的注意事项
- 不要随意修改框架样式的源文件，否则框架更新后修改的内容会丢失，所有需要调整的样式都写在自定义样式文件中。
- 如果自定义样式的优先级不够，无法覆盖框架样式，可以适当使用更具体的选择器，或者使用!important规则，但是!important尽量不要大量使用，否则会导致样式维护困难。
- 可以将自定义样式按照功能拆分，比如公共样式、组件样式、页面样式分开存放，引入时按照公共到组件再到页面的顺序加载，结构更清晰。
提升开发效率的小技巧
如果项目中使用的框架样式和自定义样式比较多，可以通过以下方式进一步提升效率：
- 使用CSS预处理器比如Sass或者Less，将多个自定义样式文件合并打包，减少HTTP请求次数。
- 给自定义样式添加统一的前缀，比如所有自定义类都加
custom-前缀，避免和框架的类名冲突。 - 定期整理自定义样式，删除无用的样式代码，减少文件体积，提升页面加载速度。
按照上述方法组合加载CSS样式，既能充分利用成熟框架的优势减少重复开发，又能通过自定义样式满足项目的个性化需求，有效提升前端开发的效率和代码的可维护性。