Начальная загрузка "class = text-center" против CSS "text-align: center"

Question

Возможно, мы прекратим использовать платформу Bootstrap, поэтому я хочу знать, изменит ли class="text-center" ванильный CSS что-нибудь.Есть ли разница в поведении между

<!--Bootstrap files already included-->
<header>
    <p class="text-center">Some text</p>
</header>

и

<header>
    <p>Some text</p>
</header>

...

/*Separate style.css file*/
header p {
    text-align: center;
}

?

Answer 1

Вопрос ОП, кажется, был отредактирован после того, как он был впервые опубликован.По сути, он спрашивает: делает ли Bootstrap что-нибудь дополнительно для элементов с классом .text-center, в дополнение к text-align: center;.У меня тоже было это сомнение, и ответ - нет.Я думаю, что на этот вопрос можно лучше ответить, просто взглянув на исходный код Bootstrap:

.text-center {
  text-align: center !important; }

Видимо, все, что Bootstrap делает, это применяет одно правило CSS: text-align: center !important; к такому элементу.Так что да, их можно считать эквивалентными.

Answer 2

Конечно, просто имейте в виду, что селектор p будет применять этот стиль к каждому <p> тегу на вашей странице.Если это стиль, который вы определенно хотите, чтобы каждый <p> имел, то вы можете использовать его.Если вы хотите, чтобы у некоторых из них был этот стиль, то придерживайтесь этого класса.Sidenote, вы можете использовать следующий синтаксис для нацеливания только на элементы, которые <p class="text-center">, не затрагивая другие теги с тем же классом.

p.text-center {
    text-align:center
}

ПРИМЕЧАНИЕ: Чтобы прояснить что-то, это базовая функциональность CCS, полностью независимая от начальной загрузки.Вы можете сделать это, используете ли вы это или нет.