Что лучше: больше классов или больше дублированных стилей?

Question

[Vadim Stepanenko]

Имеет ли значение, как лучше делать: написать "универсальные" классы (.flr - float: right; .tar - text-align: right; e.t.c.) и инклюдить эти классы а-ля
<div class="block tar truncate not-allowed"></div>

или же блок с 1-2 классами, но эти классы будут заточены конкретно под данный блок? Тогда классов будет больше, стили будут повторяться, но html разметка будет чистой

Answer 1

[Дима Паутов]

Всё в меру!!! Так можно и каждое свойство в класс обернуть и верстать. Жопа? Жопа будет, зато универсальность. Нельзя сделать весь html и css универсальным под все задачи, но будут всегда те решения, которые пригодятся в любых задачах.

Выравнивание текста, сетка, и т.п. Посмотрите например на бутстрап, а именно на раздел https://getbootstrap.com/docs/4.3/utilities/, тут в красках показано, какие вещи можно выделить в отдельные классы.
Ну и + ваши компоненты, которые вы создадите для вашего проекта. Если вы будете ответственно подходить к их созданию и следить, что бы всё не разрасталось, тогда всё у вас будет хорошо!!

Но даже такую универсальность будет тяжело писать на чистом css, поэтому, в таких вещах пригодятся препроцессоры, что бы хотя бы ваш код хранить в удобочитаемом и структурированном виде для разработки.

Answer 2

[Kappy]

Представь класс text-primary-m, в котором есть какой то margin, или button с общим паддингом. Как думаешь, если у тебя будет куча классов, легко ли будет поменять margin с 4px до 8px к примеру?
Конечно лучше общие классы выделить в общие, тогда 1 движением можно все поменять.
А вообще можно посмотреть в сторону препроцессоров или модульного css, очень удобные интсрументы.

Answer 3

[Metaller]

Это два разных подхода, выбирайте тот, который вам ближе.

Подход с универсальными классами удобен, в частности, для быстрого прототипирования, посмотрите, например, Atomic CSS https://acss.io/ или Tailwind CSS https://tailwindcss.com/ для вдохновения.

Подход с 1-2 классами, тогда имеет смысл посмотреть в сторону BEM, и тут я имею ввиду методологию подхода, а не конкретные инструменты https://ru.bem.info/methodology/quick-start/