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

«Какие плюсы и минусы объединения CSS имен» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Плюсы:

  1. Уменьшение размера файла за счет устранения дублирования
  2. Повышение производительности (меньше CSS для парсинга)
  3. Упрощение поддержки (один источник правды)

Минусы:

  1. Снижение читаемости (слишком длинные классы)
  2. Возможные конфликты специфичности
  3. Сложность поиска в коде

Пример:

/* Вместо: */
.btn { padding: 10px; }
.btn-primary { background: blue; }

/* Объединяем: */
.btn.btn-primary { 
  padding: 10px;
  background: blue;
}

Лучше использовать с осторожностью и только там, где это действительно оправдано.