Слово "каскадные" в названии CSS не для красоты — это ключевая идея всей технологии. Стили не применяются к элементу по одному правилу, а накапливаются из разных источников: браузерных стилей по умолчанию, стилей сайта, а иногда и стилей, которые пользователь настроил у себя в браузере. Каскад решает, какое из противоречащих друг другу правил победит.
Первый фактор — специфичность селектора. Id весит больше класса, класс весит больше тега, а инлайн-стиль прямо в атрибуте style перебивает почти всё, кроме правил с пометкой important. Именно поэтому селектор вроде div.card.featured побеждает более общий .card, даже если оба правила описывают один и тот же цвет фона по-разному.
Второй фактор — порядок правил в коде. Если специфичность двух селекторов одинакова, победит то правило, которое находится ниже по файлу или подключено позже. Это объясняет классическую ситуацию, когда стили вроде бы написаны верно, но не применяются — просто ниже в каскаде их перебивает другое правило с той же специфичностью.
Отдельно стоит сказать про important — эта пометка ломает нормальную логику каскада и заставляет правило побеждать почти всегда, независимо от специфичности и порядка. Использовать её раз-два в проекте иногда оправданно, но если important встречается на каждом шагу, это обычно означает, что структура стилей выросла в нечто трудноуправляемое.
Разобраться в специфичности проще на конкретных примерах: сравнить вес разных сочетаний классов, тегов и id и увидеть, какое правило в итоге сработает. Такие примеры с калькулятором специфичности можно найти в статье про специфичность на MDN.
Понимание каскада особенно выручает при отладке чужого кода — вместо того чтобы добавлять всё новые классы поверх старых, полезнее сначала понять, откуда вообще взялось текущее значение свойства, открыв вкладку стилей в инструментах разработчика браузера.
