Урок 12. Старый vs Новый: Каскад, наследование и специфичность
⚡ Кратко
«Война !important» даёт тот же результат на экране, но превращает CSS в неуправляемый. Управление специфичностью через классы — тот же вид, но поддерживаемо.
Сравнение подходов
Внешне оба варианта могут выглядеть одинаково. Разница — в поддержке: первый загоняет проект в тупик, второй остаётся гибким.
❌ Старый подход: борьба через !important
Цвет «не применялся», и кто-то добавил !important. Потом понадобилось переопределить — добавили ещё один. Теперь любое изменение требует нового !important: ставки только растут.
Лид-абзац синий — но только потому, что !important победил предыдущий !important.
.card p { color: gray !important; }
.text { color: blue !important; } /* перебиваем предыдущий важным */
/* следующему правилу опять понадобится !important… */✅ Новый подход: низкая специфичность и понятные классы
Никаких !important. Отдельный класс .card__lead с той же низкой специфичностью даёт нужный цвет, а порядок правил предсказуем. Любой следующий стиль легко переопределит этот без «гонки ставок».
Тот же синий лид-абзац — но через обычный класс, который легко переопределить.
.text { color: gray; } /* (0,0,1,0) */
.card__lead { color: #2563eb; } /* (0,0,1,0), читаемое имя */!important, сначала спроси: «какое правило я пытаюсь перебить и почему оно сильнее?»