В bootstrap есть много utility классов, типа
.text-center,
.text-lowercase,
.w-100,
.border-0 и так далее.
Узнать больше можно
здесь
Сам фреймворк определяет их как
classes with a single purpose to reduce the frequency of highly repetitive declarations.
Некоторые из этих классов включают несколько несколько правил, некоторые только одно ( часто с флагом !important, что явно отсылает к функциональному css )
Так вот вопрос: а когда их использовать-то? Кто-то скажет: "когда хочешь, тогда и используй". Так-то оно так. Но я имею ввиду другое.
Когда их правильно использовать, а когда нет?Здесь я набросал два примера.
В первом случае, элемент стилизуется с помощью utility классов насколько это возможно. Некоторые правила перечислены непосредственно в
.my-div, посколько они мне нужны, а фреймворк не предусматривает для них utility класса. А если бы предусматривал, то это был бы не бутстрап, а
tachyons
Во-втором примере, привычный вариант - все стили под одним классом.
Первый пример старается реиспользовать часто используемые css правила(это была задумка бутстрапа), однако мы получаем вот такой кипеш в html
class="my-div1 d-inline-block text-center text-uppercase w-100 font-italic py-3 my-3"
Во-втором примере, у меня только один класс(что уже неплохо, минимум кипеша в html), однако стили no reusable.
Остаётся понять, что из этого худшее зло.
Считаете ли вы, что необходимо использовать вспомогательные классы насколько это возможно(dry css) и пожертвовать тем, как будет выглядит html?
Как вы их используете?
Простой
Простой
