Почему встроенный стиль в порядке с начальной загрузкой?

Question

Я делаю онлайн-курс по интерфейсу, я только начал знакомиться с начальной загрузкой 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="", это, вероятно, не встроенный стиль.

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>

против (хорошая практика):

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-стилях вы можете прочитать здесь .