直接用 !important 覆盖 Bootstrap CSS 会导致维护困难、状态样式不一致、响应式失效等问题；应优先使用 CSS 变量、提权选择器或 @layer overrides 等规范方式定制。
直接用 !important 覆盖 Bootstrap 的 CSS，不是“写法不对”，而是它在绝大多数场景下会把样式控制权从可预测的层叠机制里硬抢出来——结果是短期生效、长期难维护、协作时易踩雷。
Bootstrap 5.3+ 的 !important 是成套锁死的，单点覆盖必失败
Bootstrap 不只给 background-color 加 !important，还同步在 :focus-visible、:disabled、.btn:active 等状态里给 border-color、box-shadow、outline 全部加。你改一个属性，其他三个还在生效，视觉上“看起来没变”。
- DevTools 里你的
background-color: #dc2626 !important被划掉，来源却是bootstrap.min.css - 按钮正常态变红了，但 hover 一上去又弹回默认蓝
- 点击后阴影没消失，因为漏写了
box-shadow: none !important
响应式类（如 d-none）会被全局 !important 彻底堵死
d-none 本身带 !important，本意是强隐藏；但如果你写了 .sidebar { display: flex !important }，这条规则权重更高、又没媒体查询，就会把所有断点下的 d-md-block、d-lg-none 全部压住——小屏也不隐藏，响应式逻辑直接崩掉。
- 验证方法：打开 DevTools → Computed → 找
display值，看它标着哪个来源 +!important - Vue/React 中动态绑定 class 时，
d-none d-md-block叠加完全依赖层叠顺序，一旦被外部!important插队，就彻底失效 - 真正危险的不是你亲手写的
!important，而是框架、Sass 编译或 CMS 自动注入的那些
更干净可控的替代方案其实就三条
不用 !important 并不等于束手无策。Bootstrap 5.3+ 已为定制留出正路：
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 变量覆盖：比如
.my-btn { --bs-primary: #2563eb; --bs-primary-rgb: 37, 99, 235; }，变量必须作用于目标元素或其祖先，且注入时机要在 Bootstrap 样式之后 - 提权选择器：用
button.btn.btn-primary（0,2,1）或.my-form .btn.btn-primary（0,3,0），比硬刚!important更稳定 - 避免 JS 动态插入组件的坑：modal、tooltip 这类 DOM 是运行时插到
document.body的，脱离你写的容器结构，所以.my-form .btn根本匹配不到，得用:is()或@layer overrides主动接管层级
最常被忽略的一点：当你发现非得靠 !important 才能覆盖时，问题往往不在“怎么盖得更狠”，而在于“为什么原始规则没按预期生效”——是加载顺序错位？是选择器根本没匹配到目标元素？还是框架的 JS 动态逻辑绕过了你的样式作用域？先查 DevTools 的 Computed 面板，再动手写代码，比反复加 !important 省一半时间。
