Почему разные свойства одного и того же селектора перезаписывают друг друга?

Принцип каскадности CSS и разрешение конфликтов

В основе этого механизма лежит фундаментальный принцип каскадности (Cascading) — первая "C" в аббревиатуре CSS. Когда браузер рендерит HTML-страницу, он собирает все CSS-правила из разных источников, а затем разрешает конфликты между ними, если один и тот же селектор определяет разные значения для одного и того же свойства. Это не ошибка, а продуманная архитектура, позволяющая управлять стилями предсказуемо.

Основные причины перезаписи

1. Порядок объявления в источнике

Браузер читает CSS сверху вниз. Если одно свойство определено несколько раз, "победит" последнее объявление (в пределах одинаковой специфичности и важности).

.button {
    background-color: blue; /* Это значение будет перезаписано */
    padding: 10px;
    background-color: green; /* Это значение применится */
}

2. Специфичность селектора

Это система весов, определяющая, какое правило приоритетнее. Вычисляется по формуле:

• Инлайн-стили (style="..."): 1000
• ID селекторы (#id): 100
• Классы, атрибуты, псевдоклассы (.class): 10
• Элементы, псевдоэлементы (div): 1

div { color: black; }        /* Специфичность: 1 */
.container { color: blue; }  /* Специфичность: 10 - победит */
#main { color: red; }        /* Специфичность: 100 - победит */

3. Источник стилей и важность

Приоритет применяется в следующем порядке:

1. !important (после значения свойства)
2. Инлайн-стили (в атрибуте style)
3. Авторские стили (ваши CSS-файлы)
4. Стили пользователя (настройки браузера)
5. Стили браузера (user agent stylesheet)

.button {
    color: red !important; /* Самый высокий приоритет */
}

Механизм каскада шаг за шагом

Браузер определяет конечное значение свойства через последовательную фильтрацию:

1. Сбор всех объявлений: Находит все правила, применяющиеся к элементу.
2. Сортировка по источнику и весу: !important > обычные, авторские > пользовательские > браузерные.
3. Сортировка по специфичности: Внутри каждой группы по весу селекторов.
4. Применение порядка: Если специфичность одинакова — побеждает последнее объявление в коде.

Практический пример

<style>
    div { font-size: 14px; }                     /* Шаг 1: специфичность 1 */
    .text { font-size: 16px; }                   /* Шаг 2: специфичность 10 */
    #content div.text { font-size: 18px; }       /* Шаг 3: специфичность 1+10+100=111 */
    
    /* Специфичность 111, но !important */
    .special { font-size: 20px !important; }     /* Шаг 4: побеждает важность */
    
    /* Даже высокая специфичность не перевесит !important */
    #content div.text.special { font-size: 22px; } 
</style>

<div id="content">
    <div class="text special">Текст</div>
</div>

Почему это полезно?

• Наследование и переопределение: Можно задать базовые стили и точечно их изменять.
• Модульность: Разные CSS-файлы могут дополнять друг друга.
• Отладка: Инструменты разработчика явно показывают перечеркнутые свойства.
• Responsive design: Медиа-запросы переопределяют стили для разных устройств.

Лучшие практики для управления

• Избегайте !important — это "атомная бомба" в каскаде.
• Используйте методологии (БЭМ) для низкой специфичности.
• Линтеры (Stylelint) помогут отслеживать проблемы.
• Инструменты разработчика показывают приоритетность правил.

Вывод: Перезапись свойств — не побочный эффект, а краеугольный камень CSS, обеспечивающий гибкость и предсказуемость стилизации. Понимание каскада и специфичности — критически важный навык фронтенд-разработчика, позволяющий создавать поддерживаемые и масштабируемые стилевые системы.