Что лучше использовать много class или свойств?

Question

[aloky]

К примеру есть button

.btn { color: black, width: 100% }

или <button class="color-black width-100"></button>

Comments

[Ankhena]

<button class="btn btn--default"></button>
<button class="btn btn--submit"></button>
<button class="btn btn--danger"></button>
<button class="btn btn--close"></button>

В основном классе пишете свойства, которые есть у всех кнопок.
В модификаторах отличия.
Называния классов даете по смыслу. Т.е. если кнопка красная, то не пишем --red, а определяем почему она такая, например, потому что очищает форму или удаляет данные. В другом дизайне она может оказаться оранжевой или еще какой-то. Достаточно будет поменять стиль "опасных" кнопок и они все изменятся, в каком месте сайта они бы ни оказались.
Читайте про БЭМ.

Answer 1

[Григорий]

https://ru.bem.info/

Answer 2

[strelok011]

БЭМ дает логику в верстке, если проект сложный и уникальный.
При этом он до продакшна может не доезжать в принципе.

Если разработка идет на базе готового фреймворка типа materializecss или бутстрап, то тут комбинирование классов основной прием, позволяющий пользоваться конструктором.

Кажется есть инструмент (я тут боюсь ошибиться, но рассказывали), который может превратить БЭМ (или любой используемый вариант) в набор атомарных классов по свойствам - компиляция многомегабайтного css файла превращает в файл около 300-500к (или и того меньше), в котором просто разложены основные свойства css на одно-двух буквенные классы.
В результате получаете небольшой размер файла стилей + обфусцированную верстку, в которой комплект свойств будет короче человекопонятного наименования стиля.
Это если топить за сокращение кода.

Общая рекомендация - получить опыт и БЭМ и фреймворк верстки, а затем или комбинировать или остановиться на чем-то удобном для конкретного проекта.