Какие рекомендации по работе с классами для микрофронтов

Что проверяют

Понимаете ли вы, что все микрофронты на странице живут в одном документе и одном глобальном пространстве CSS, и как не дать их стилям конфликтовать. Следом почти всегда спрашивают, что будет, если два микрофронта подтянут разные версии одной UI-библиотеки.

Как отвечать

Под «классами» здесь обычно имеют в виду CSS-классы. Каркас ответа: изоляция имён, изоляция глобальных стилей, общая дизайн-система.

• CSS Modules: имена классов становятся уникальными на сборке. Добавьте в шаблон localIdentName префикс приложения: иначе одинаковые пути файлов в двух репозиториях могут дать одинаковый хэш;
• префиксы по соглашению: БЭМ с неймспейсом микрофронта, например checkout-cart__item. Работает без инструментов, но держится на дисциплине и линтере;
• UI-библиотеки: у многих есть настройка префикса. В antd это prefixCls в ConfigProvider, у Tailwind своя опция prefix. Без неё .ant-btn двух версий перебивают друг друга;
• глобальные стили: reset, шрифты и переменные темы подключает только хост. Микрофронт не пишет правил для body, h1 или *;
• каскадные слои: @layer задаёт порядок приоритета явно, и стили хоста не зависят от того, какой микрофронт загрузился последним;
• Shadow DOM: настоящая изоляция через веб-компоненты, но глобальные стили внутрь не проходят, @font-face объявляется в документе, а модалки, которые библиотека рендерит порталом в body, остаются без стилей;
• дизайн-токены: цвета и отступы приходят из хоста CSS-переменными, тогда тема меняется в одном месте.

Отдельно упомяните выгрузку: стили, вставленные в <head> через style-loader или CSS-in-JS, после размонтирования микрофронта часто остаются на странице.

Где спотыкаются

Надеются только на CSS Modules и забывают про :global и классы сторонних библиотек, которые модульная сборка не трогает.

Кладут reset или normalize в каждый микрофронт. Порядок загрузки меняется, и вёрстка соседа ломается в случайный момент.

Выбирают Shadow DOM как серебряную пулю и не знают про порталы и шрифты, пока это не всплывёт на проде.