Question

我正在前端上在线课程，我才刚刚开始了解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>

请澄清一下，我的确知道我在示例中使用的样式与使用引导程序的样式没有做相同的事情。我只是想知道为什么一个还可以，而另一个不可以。

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

Answer 1

第一个实例是内联样式：

<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>

vs（良好做法）：

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样式here的更多信息。

为什么引导程序可以内联样式？

1 个答案: