А вы знали, что какое-то время назад в CSS появилась функциональность для каскадных слоев?

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

При этом стили вне слоев все еще будут в приоритете над остальными. На картинке представлен небольшой пример, как это работает.

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

@import url("https://cdn.com/bootstrap.min.css") layer;

@layer {
 .fs-1 {
  font-size: 3rem;
 }
}

Да, это отличная возможность избавиться от !important, правда если ваш проект не настроен так, что стили из библиотек подкладываются в общий style.css вместе со стилями проекта при сборке. Из-за того, что стили вне слоя всегда будут в приоритете, переопределение через слои не будет работать. Тогда получается, что нужно либо весь проект переводить на использование слоев, или же не использовать их.

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

Подробнее про каскадные слои можно почитать в статье на Doka.