Все мы знаем принцип каскада в CSS. Но вот в CSS добавили новый механизм для работы с ним, основанный на каскадных слоях. Такие слои в теории могут помочь в управлении порядком применения стилей. Вы можете объявлять стили в одном или нескольких слоях, и они будут применяться в зависимости от порядка этих слоев.
При этом стили вне слоев все еще будут в приоритете над остальными. На картинке представлен небольшой пример, как это работает.
С одной стороны, такая возможность звучит многообещающе. Но лично я пока не вижу, как ее можно использовать в текущих проектах, разве что для переопределения стилей из импортируемых библиотек, примерно вот так:
@import url("https://cdn.com/bootstrap.min.css") layer;
@layer {
.fs-1 {
font-size: 3rem;
}
}
Да, это отличная возможность избавиться от
!important, правда если ваш проект не настроен так, что стили из библиотек подкладываются в общий style.css вместе со стилями проекта при сборке. Из-за того, что стили вне слоя всегда будут в приоритете, переопределение через слои не будет работать. Тогда получается, что нужно либо весь проект переводить на использование слоев, или же не использовать их.Возможно, именно поэтому я до сих пор не сталкивалась с этой возможностью в реальной разработке.
Подробнее про каскадные слои можно почитать в статье на Doka.