CSS Layers и @layer: организация специфичности в крупных React-проектах без magic-перео...
CSS Layers и @layer: организация специфичности в крупных React-проектах без magic-переопределений Каждый, кто работал над большим React-приложением, сталкивался с хаосом специфичности: один файл переопределяет стили другого, появляются !important, глубокие селекторы. Решение - CSS Layers (@layer) - явный контроль приоритетов между слоями стилей, независимо от селекторов. Четкая иерархия слоев Определяем слои: base (сброс, токены), components (UI-кит), overrides (специфичные правки). Даже если внутри overrides селектор слабее - стили из этого слоя перекроют components. В production это избавляет от каскадных конфликтов при подключении CSS Modules в React-компонентах. Изоляция библиотек Сторонние UI-библиотеки (Ant Design, MUI) кладем в свой слой. Их стили не "пробивают" ваши кастомные, если поместили свой слой выше. Например, библиотечные кнопки с высокоспецифичными селекторами перестанут ломать дизайн-систему. Никаких !important Раньше для переопределения библиотечных стилей требовалось увеличивать специфичность. Теперь - меняем порядок слоев. Типичная ошибка: забыть задать порядок слоев первой @layer директивой без правил - иначе слои применяются в порядке появления. Пример структуры: /* global.css */ @layer base, components, overrides; @layer base { :root { --color-primary: blue; } *, *::before, *::after { box-sizing: border-box; } } @layer components { .btn { background: var(--color-primary); } } @layer overrides { .btn.special { background: red; } } В React-сборке (Vite, CRA) подключаем global.css в index.tsx, а компонентные стили (CSS Modules / styled-components) "ложатся" в нужный слой через @layer. При дублировании имени слоя в разных файлах - они объединяются в один слой, что упрощает code review. Важно: - @layer - нативная CSS-фича, поддержка браузеров ~96% - Порядок слоев задается один раз (первая @layer директива без правил) - Ошибка: пытаться переопределить стили через @import без явного указания слоя Вывод: Предсказуемая каскадность без !important, глубоких селекторов и code review-сражений - попробуйте на следующем рефакторинге.