Какие архитектурные стили применяются на практике и какие trade-off у них есть?

Основные подходы к архитектуре CSS: БЭМ и другие методологии, модульные стили, CSS-in-JS и utility-first. У каждого свои компромиссы.

БЭМ, OOCSS, SMACSS

• Плюсы: работают без сборки, низкая специфичность, понятная структура.
• Минусы: держатся на дисциплине, длинные имена.

CSS Modules и scoped-стили

• Плюсы: изоляция автоматически, обычный CSS без рантайма.
• Минусы: привязка к сборщику, сложнее стилизовать дочерние компоненты.

CSS-in-JS (styled-components, Emotion)

• Плюсы: стили рядом с логикой, удобная динамика от props.
• Минусы: рантайм, сложности с SSR и Server Components.

Utility-first (Tailwind)

• Плюсы: быстрая разработка, маленький итоговый CSS, единые токены дизайна.
• Минусы: «шумная» разметка, нужен порядок с компонентами, чтобы не дублировать наборы классов.

Общие инструменты

• CSS-переменные для дизайн-токенов;
• @layer для порядка: reset → библиотеки → компоненты → утилиты.

Коротко для собеседования

Выбор между методологиями (БЭМ), модульными стилями, CSS-in-JS и utility-first — это компромисс между изоляцией, скоростью разработки, рантаймом и читаемостью разметки.

Подробнее: MDN — Организация CSS