Bootstrap CSS编码规范

Bootstrap 内置样式很全，但项目总要换配色、改间距。CSS 编码规范讲的是如何"干净地覆盖"：把自定义样式放对位置、选对选择器、控制好优先级，避免靠 !important 硬拼。

覆盖样式写在后置文件

自定义 CSS 单独成文件，并放在 bootstrap.min.css 之后引入——同优先级下后加载的规则生效：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">

说明：custom.css 里同优先级的规则会自然覆盖默认样式；整个项目要换主题色时，只改这一个文件即可。

用 class 而非 id 与 !important

选择器优先用 class，命名小写、单词间用连字符（如 .btn-orange）；避免用 id 和 !important 硬压优先级：

<style>
  /* 推荐：写在 custom.css 中 */
  .btn-orange {
    background-color: #ff9800;
    border-color: #e65100;
  }
  /* 尽量避免 */
  /* #submitBtn { background-color: #ff9800 !important; } */
</style>

说明：第一种写法覆盖自然且后续仍可再覆盖；第二种写法优先级过高，想微调只能继续加 !important，越改越乱。

先借力 Bootstrap 现成类

能表达的样式尽量用现成类组合：间距用 .mt-20 这类工具类、颜色用 .text-danger 等主题类，实在不够才自定义：

<div class="alert alert-warning text-center">请先登录</div>

说明：一行 class 就完成了"黄色警告条 + 居中"的样式，比自己写 .my-tip 再加一堆属性更省事也更有保障。

限定作用域避免污染

需要改动组件默认样式时，用外层容器类缩小影响范围，防止误伤全局：

<style>
  .login-box .form-control {
    border-color: #e0e0e0;   /* 只影响登录框内的输入控件 */
  }
</style>

声明顺序与统一单位

规则内按"先盒子、后文字"的顺序书写，长度单位统一使用 px 或 rem，颜色统一小写十六进制：

<style>
  .card {
    display: block;
    margin: 0 auto 20px;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95rem;
    color: #333;
  }
</style>

小结：覆盖 Bootstrap 的黄金三条是"后置文件引入、class 选择器、能借类就借类"；再配合作用域限定与统一的书写顺序，自定义样式就既干净又可控，升级版本时也几乎不用返工。