Урок 12. Ошибки: Каскад, наследование и специфичность

Типичные ошибки

1. Война !important

Как ломается: правило «не применялось» — добавили !important. Теперь его нельзя переопределить обычным селектором, и каждый следующий стиль тоже требует !important. Кнопка ниже остаётся серой, хотя новое правило хочет сделать её бирюзовой.

.btn       { background: #9ca3af !important; } /* перебивает всё */
.btn-primary { background: #0f766e; }          /* проигрывает: нет !important */

Как правильно: убрать !important — тогда обычная специфичность и порядок снова работают, и .btn-primary побеждает.

.btn         { background: #9ca3af; }
.btn-primary { background: #0f766e; } /* ниже и той же силы → побеждает */

2. Слишком специфичные селекторы

Как ломается: селектор #nav ul li a = (0,1,0,3) почти невозможно переопределить — приходится писать ещё длиннее. Гибкость теряется.

Как правильно: один понятный класс (0,0,1,0) легко переопределяется и переиспользуется.

/* ❌ #nav ul li a { color: ... }  → (0,1,0,3), не переопределить */
.nav-link { color: #0f766e; }        /* ✅ (0,0,1,0), гибко */

3. Ожидают наследования от margin / padding

Как ломается: задают padding родителю и ждут, что он появится у детей. Размерные свойства не наследуются — отступ остаётся только у родителя.

Как правильно: наследуются текстовые свойства (color, font-*); отступы задаются адресно тому элементу, которому нужны.

4. Не смотрят в DevTools

Как ломается: гадают, почему стиль не сработал. Как правильно: F12 → панель Styles показывает перечёркнутые (проигравшие) объявления и источник победителя за секунды.