CSS спецификация и каскад

Недавний опрос вызвал бурные обсуждения, из которых можно сделать вывод, что у некоторых разработчиков наблюдается пробел в знаниях CSS.

Не будем зацикливаться на раздувании споров. Вместо этого углубимся в теорию и проведем время с пользой.

Пример под рукой

Используем тот же пример, который использовался в опросе. Я заменил color на background и использовал более приятные цвета.

index.html

<main>
    <div class="red blue"></div>
    <div class="blue red"></div>
</main>

style.css

.red {
    background: #c23616;
}

.blue {
    background: #4b7bec;
}

/* Нерелевантный вид и стили */
body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
}

main {
    padding: 2rem;
}

div {
    width: 180px;
    height: 180px;
    border-radius: 5px;
}

div + div {
    margin-top: 10px;
}

Результат:

Как видите, оба блока синего цвета. Но почему? Причина этого заключается в том, что и .red, и .blue имеют одинаковый уровень специфичности. Поэтому браузер выбирает последний стиль в CSS-коде. В примере – это .blue.

Если поменять местами объявления классов в CSS, то получим следующее:

index.html

<main>
    <div class="red blue"></div>
    <div class="blue red"></div>
</main>

style.css

.blue {
    background: #4b7bec;
}
.red {
    background: #c23616;
}

/* Нерелевантный вид и стили */
body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
}
main {
    padding: 2rem;
}
div {
    width: 180px;
    height: 180px;
    border-radius: 5px;
}
div + div {
    margin-top: 10px;
}

Результат: