👩‍💻 Собственные каскадные слои

Чтобы понять, какой стиль применить к элементу, браузер использует принцип каскада. Когда специфичность (вес селектора) равна, то используется последнее правило:

.card {
 background-color: rgb(175, 238, 238);
}
.card {
 background-color: rgb(52, 0, 148);
}

В этом коде к карточке будет применён цвет фона rgb(52, 0, 148), поскольку он последний

Иногда нужно переопределить стили, и для этого используют модификатор !important. Он позволяет применить значение свойства вопреки обычной специфичности и каскаду.

.card {
 background-color: rgb(175, 238, 238) !important;
}
.card {
 background-color: rgb(52, 0, 148);
}

Теперь же порядок каскада можно определить через правило @layer. И разработчик в коде может контролировать приоритет стиля. В этом случае пишем ключевое слово @layer, указываем имена каскадных слоёв, которые хотим определить, и пишем правило в {}.

@layer имя-слоя {правило}

Порядок написания слоёв в заголовке запроса определяет их приоритет. В имя слоя мы оборачиваем нужные стили.

@layer dark, light;

@layer light {
  .card {
    width: 500px;
    height: 150px;
    background-color: paleturquoise;
    text-wrap: balance;
  }
}
@layer dark {
  .card {
    background-color: rgb(148, 59, 0);
  }
}

• Мы вызвали правило @layer.
• Прописали названия слоёв и порядок их следования. Последний слой — приоритетный.
• Обернули в слои правила для стилей.

В реальной разработке @layer может использоваться при работе с легаси-проектами, когда есть доступ к CSS. Можно оборачивать старые стили в слой legacy, а новые в new и явно задавать порядок приоритета.