Какие плюсы и минусы объединения CSS классов?

Объединение классов — это когда к элементу применяется сразу несколько классов: class="button button--primary is-loading".

Плюсы

• Композиция — базовый вид плюс варианты и состояния без копирования стилей.
• Переиспользование — один и тот же модификатор работает в разных контекстах.
• Простое переключение из JS — classList.toggle('is-open').

.button { padding: 8px 16px; border-radius: 6px; }
.button--primary { background: #0066ff; color: white; }
.is-loading { opacity: .6; pointer-events: none; }

Минусы

• Зависимость от порядка — при одинаковой специфичности побеждает правило ниже в CSS, а не порядок классов в атрибуте.
• Непредсказуемые сочетания — модификаторы могут конфликтовать друг с другом.
• Длинные списки классов — особенно в utility-first.
• Составные селекторы (.button.is-loading) повышают специфичность.

Как держать под контролем

Модификаторы с понятными именами, одинаковая специфичность, утилиты для условной сборки строки классов (clsx).

Коротко для собеседования

Несколько классов дают композицию и переиспользование, но порядок правил в CSS и конфликты модификаторов нужно контролировать.

Подробнее: MDN — classList