时间戳

首页 > 解决方案 > 为什么引导程序可以使用内联样式？

html - 为什么引导程序可以使用内联样式？

问题描述

我正在做前端的在线课程，我刚刚开始了解 bootstrap 4 和 flexbox。据我了解，做内联样式被认为是不好的做法。我的意思是：

<button style="color: white; border: 5px solid red;"> Press me! </button>

我喜欢最好的做法是不要这样做，主要是因为可读性。我不明白的是为什么上面的按钮不是一个好的做法，但这里的代码被认为是好的做法

<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>

只是为了澄清一下，我确实理解我在示例中使用的样式与使用 bootstrap 的样式不同。我只是对为什么一个可以而另一个不可以感兴趣。

我想出的唯一一件事是，由于引导程序正在使用class=""它，它可能不是内联样式。

标签： htmlbootstrap-4

解决方案

第一个实例是内联样式：

<button style="color: white; border: 5px solid red;"> Press me! </button>

第二个有几个在单独的 css 文件中设置样式的类：

<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>

使用内联样式是不好的做法的主要原因之一是因为它们可以覆盖单独的 CSS 文件中存在的样式，并且一旦您的 CSS 变得更加复杂，就很难跟踪。此外，当您使用内联样式时，您的代码变得更难维护。例如，如果您的 HTML 中有多个按钮，每个按钮都使用内联样式单独设置样式，并且您决定更改其中一种样式，那么您将不得不更改每个按钮的样式，而如果您给它们所有相同的类并在单独的 CSS 文件中设置该类的样式，然后您可以更改一次颜色，它将更新您的所有按钮。

例如（不好的做法）：

HTML

<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>

与（良好做法）：

HTML

<button id="btn-one" class="button">Click here</button>
<button id="btn-two" class="button">Click here</button>
<button id="btn-three" class="button">Click here</button>
<button id="btn-four" class="button">Click here</button>

CSS

.button {
    background-color: dodgerblue;
}

您可以在此处阅读有关 CSS 样式的更多信息。

推荐阅读