直接加 !important 是坏主意，因其破坏 bootstrap 5 的 specificity 设计、升级时易失效、污染全局且阻碍 js 动态控制；应优先用 css 变量、提高选择器权重或 @layer 控制层级。
为什么直接加 !important 是个坏主意
Bootstrap 5 的 CSS 是按 specificity（优先级）和加载顺序设计的，硬塞 !important 不仅让调试变困难，还会在升级 Bootstrap 时突然失效——比如你覆盖了 .btn-primary 的背景色，但 v5.3 改用 CSS 变量重写了按钮逻辑，你的 !important 样式可能被新规则绕过，或者和 data-bs-* 属性样式冲突。
更实际的问题是：它会污染全局，导致后续组件（如 Modal、Toast）里同名类的行为异常，而且没法被 JS 动态控制（比如用 classList.toggle() 切换状态时，!important 会让切换失效）。
用 Bootstrap 自带的 CSS 变量覆盖颜色/间距
v5.2+ 开始，几乎所有基础样式都通过 CSS 变量驱动，比如按钮圆角、字体大小、主色系。改这些变量比重写选择器安全得多：
- 修改根元素的
:root变量即可生效，无需担心选择器权重 - 所有内置组件自动响应变更（
.btn、.card、.navbar全部跟着变） - 变量名有规律，比如
--bs-primary、--bs-body-font-size、--bs-border-radius
:root {
--bs-primary: #4a5568;
--bs-border-radius: 0.375rem;
}
注意：别在 body 或局部 class 里覆盖变量，否则子组件读不到；也别用 !important 去“加强”变量赋值——CSS 变量本身不支持 !important，写了等于白写。
提高选择器 specificity 而不是靠 !important
Bootstrap 的大多数类选择器是单类（如 .btn、.text-center），权重为 10。只要把你的样式写成更具体的形式，就能自然压过它：
- ✅ 推荐：
.my-custom-card .card-header（权重 20） - ✅ 更稳：
section.my-section .btn-primary（权重 20，且限定语义区域） - ❌ 避免：
div.card .card-header（泛化标签无意义，还增加维护成本）
常见陷阱：
- 用
body .my-btn想提权，结果导致所有页面按钮都被影响 - 在 SCSS 中用
&嵌套过深，编译出超长选择器（如.page-home .layout-main .sidebar .btn），影响性能且难调试 - 忘记 Bootstrap 的某些类带
[data-bs-toggle]属性，单纯写.dropdown-toggle权重不够，得写成.dropdown > .dropdown-toggle
用 @layer 控制 CSS 加载顺序（现代方案）
如果你用的是支持 @layer 的构建工具（Vite + PostCSS 8.4+、Webpack 5 + css-loader 6.8+），可以把自定义样式放进明确层级：
@layer bootstrap, custom;
<p>@layer bootstrap {
@import "bootstrap/scss/bootstrap";
}</p><p>@layer custom {
.btn-custom { background-color: var(--bs-success); }
}</p>
这样即使你的 .btn-custom 是单类，也会因 @layer custom 在 @layer bootstrap 之后解析而生效。关键是：不用算 specificity，也不依赖加载顺序 hack（比如把 CSS 放在 bootstrap.css 后面），还能和 Bootstrap 的 Sass 变量共存。
容易忽略的一点：如果项目里混用了 @import 和 link 引入 CSS，@layer 会失效——必须全走构建流程，不能有外部 CDN 的 bootstrap.css。
改样式这事，真正麻烦的从来不是“怎么盖过去”，而是“盖完会不会哪天自己塌了”。变量、层、选择器权重，都是为了让修改可预期、可追溯、可撤销。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
