Ответ
Плюсы:
- Уменьшение размера файла за счет устранения дублирования
- Повышение производительности (меньше CSS для парсинга)
- Упрощение поддержки (один источник правды)
Минусы:
- Снижение читаемости (слишком длинные классы)
- Возможные конфликты специфичности
- Сложность поиска в коде
Пример:
/* Вместо: */
.btn { padding: 10px; }
.btn-primary { background: blue; }
/* Объединяем: */
.btn.btn-primary {
padding: 10px;
background: blue;
}
Лучше использовать с осторожностью и только там, где это действительно оправдано.