Bootstrap Style Guide для заказа классов

Question

Я нашел несколько руководств по стилю об упорядочении объявлений, упорядочении атрибутов, но ничего о упорядочении классов.

Например, один разработчик делает это:

<div class="btn btn-primary btn-lg mt-2 ml-3">My button</div>

Другой разработчик делает это:

<div class="mt-2 ml-3 btn btn-lg btn-primary">My button</div>

Я бы хотел согласованности при заказе классов. Есть ли какое-то специальное руководство по стилю, о котором я не знаю, или есть какие-либо рекомендации для этого?

Answer 1

Мне не известно ни одного руководства по упорядочению классов, потому что порядок классов в элементе не влияет на специфику.Они являются просто ссылками на исходный CSS и будут соответствовать любым каскадным эффектам в CSS.

Мы можем создать блок HTML с двумя конфликтующими классами, один из которых показывает элемент, а другой скрывает элемент.

<div class="show hide">
  <p>Some content</p>
</div>

.show { display: block; }
.hide { display: none; }

Здесь тот же элемент с обратными порядками классов.

<div class="hide show">
  <p>Some content</p>
</div>

.show { display: block; }
.hide { display: none; }

Оба эти блока будут скрыты, потому что они будут придерживаться каскадных эффектов CSS.

Я бы порекомендовал делать то, что наиболее разумно для вас, и быть последовательным в этом.

Answer 2

Зависит от того, как вы размещаете свою кнопку. Сначала вы должны добавить эти классы -

btn btn-lg btn-primary

потому что он приобретает пространство в определенном Затем вы должны добавить классы, которые влияют на свойства кнопки -

мт-2 мл-3