CSS-слои (@layer) на пальцах:

• Объявляете слои: @layer base, comp, MyLayer...
• Приоритет: Чем ближе к концу списка, тем выше приоритет.
• Забудьте о войнах: Больше не нужно сражаться со специфичностью селекторов.
• Идеально, если вы используете UI-фреймворки и/или готовые шаблоны.
• Можно обернуть все внешние стили в слой, импортируя их через @import или внутри блока @layer, если используете препроцессор.

Кейс из жизни:

• Компания купила готовый макет сайта.
• «Под капотом» там крутится, например, PrimeVue.
• Приходит дизайнер и говорит: «Все фигня, сейчас перерисую как надо!»

Что делать? Изолировать стили:

• PrimeVue, Tailwind и подобные фреймворки уже умеют экспортировать стили в layer.
• Все кастомные стили от создателя макета оберните в другой слой.
• Создайте свой слой и поставьте его последним.

Все! При любых совпадениях классов и с любой специфичностью, ваши стили будут иметь приоритет над предыдущими.