19 подписчиков
Небольшой обзор CSS фреймворков и их работа с React Server Components (RSC) в NextJS:
1. Традиционные sass/less фреймворки (например, semantic-ui, antd4):
- Плюсы (+):
- Работают в React Server Components (RSC).
- Широко использовались в прошлом.
- Минусы (-):
- Брошенная поддержка - остановлена разработка и поддержка.
- Монолитный подход - стили и компоненты в одном наборе, не переиспользуются развитые headless компоненты с развитым accessibility (управление с клавиатуры и т.п., что становится законодательным требованием в некоторых странах).
2. Более современные CSS-in-JS фреймворки (например, antd5, chakra-ui):
- Плюсы (+):
- Удобство использования для JS разработчика..
- Динамичные стили, зависящие от состояния компонентов.
- Минусы (-):
- Не работают в React Server Components (RSC).
3. Гибридные фреймворки (например, kuma-ui):
- Плюсы (+):
- Стили собираются в статику при сборке, что обеспечивает совместимость с RSC.
- Минусы (-):
- Возможно, узкая сфера применения. Разработчику нужно учитывать ограничения подхода, чтобы обеспечивать статическую сбоку динамических стилей.
Возможно, по этому пути пойдут css in js фреймворки (п.2) для совместимости с RSC.
4. Tailwind фреймворки:
- Плюсы (+):
- Работают в React Server Components (RSC).
- Есть готовые комбо с Headless компонентами, например с RadixUI через shadcn
- Минусы (-):
- Что удобно верстальщику, может быть непривычным для разработчиков, требуется создание div верстки с длинными цепочками классов вместо привычного управления атрибутами элементов.
5. Panda CSS:
- Плюсы (+):
- Работают в React Server Components (RSC).
- Атрибутный синтаксис, что может быть удобным разработчикам, привыкшим к работе с semantic-ui и AntD.
- Развитая Headless библиотека ArkUI (удобнее использовать park-ui,чтобы не собирать комбо самому). Также можно подключить RadixUI.
- Богатые возможности применения park-ui: работает в React и Vue, с panda css и tailwind. Можно комбинировать подходы и стили написанные как на panda css, так и на tailwind.
- Минусы (-):
- Свежая технология, может меняться от версии к версии.
- Малая база применения, не известно на данный момент, будет ли широкая адаптация, или фреймворк спустя пару лет заглохнет.
Выбор фреймворка зависит от требований проекта, предпочтений разработчиков и поддержки фреймворка в будущем.
Важно также учитывать совместимость с React Server Components (RSC), если это требуется в вашем проекте.
При разработке корпоративных приложений и онлайн платформ хотелось бы иметь решение, которое будет актуальным хотя бы 5-10 лет. В свое время мы сделали ставку на NextJS и она полностью себя оправдала, но c css фреймворками такой срок кажется невозможным. Мы прошли semantic-ui, AntD 4 и 5 версию, и снова видим тупик в связи с адаптацией RSC.
2 минуты
4 февраля 2024