Обзор CSS-in-JS: стилизация компонентов React

Без категорий | Amber | Комментировать запись

В этой статье мы рассмотрим 11 лучших библиотек CSS-in-JS, исходя из общего количества звезд на GitHub. Также мы поговорим об их особенностях, сильных и слабых сторонах. В обзор включены как новейшие библиотеки типа emotion, так и старые, такие как aphrodite.

Несмотря на преимущества CSS-in-JS, многим разработчикам потребовалось время, чтобы привыкнуть к этому инструменту. Если вы мало о нем знаете, советуем вам почитать эту статью.

Сегодня в CSS-in-JS нет недостатка в библиотеках, которые позволяют стилизовать компоненты React с помощью JavaScript. Фактически на момент написания данной статьи вышло 55 таких библиотек. Все они перечислены в репозитории css-in-js @MicheleBertoli, который представляет собой гигантский централизованный список библиотек с отдельными примерами стилизации базовой кнопки при помощи каждой из них.

Новая библиотека появляется примерно раз в полгода. Такой темп очень обнадеживает. Кроме того, каждый новый подход берет за основу сильные стороны предыдущих библиотек, при этом восполняя некоторые из их недостатков. Хотя некоторые из новых библиотек предоставляют больше возможностей и производительности, мы не можем недооценивать надежность и долговечность старых библиотек, поэтому они также включены в наш обзор. Помните об этом, выбирая библиотеки для вашего следующего проекта.

Примечание: Для краткости мы не будем включать в обзор примеры кода. Если вы хотите увидеть, как каждая библиотека используется на практике, обратитесь к ресурсам на GitHub, ссылки на которые мы предоставим.

Библиотека emotion

Библиотека emotion довольно молодая. Однако она не только предоставляет для своего возраста впечатляющий набор функций, но и, похоже, очень быстро набирает обороты. Библиотека emotion – это и отличный опыт разработчика, и хорошая производительность. Ее важнейшая особенность заключается вот в чем: она комбинирует стилизованные компоненты, а также предоставляет традиционные селекторы для вложенных компонентов. Безусловно, emotion заслуживает внимания.

• Ссылка на Github.
• Слоган: Следующее поколение CSS-in-JS. Emotion – это высокопроизводительная легкая библиотека CSS-in-JS. Она значительно снижает затраты времени выполнения css-in-js, анализируя стили с помощью PostCSS во время компиляции, а не во время выполнения.
• Возможности: анимация, динамические свойства, медиа-запросы, вложенные селекторы, псевдоселекторы, рендеринг на стороне сервера, стилизация компонентов.

Библиотека glamorous

glamorous основана на популярной библиотеке glamour. Она предоставляет опыт работы со стилизованными компонентами, но делает это с помощью синтаксиса JavaScript, а не интерполированных строк. Динамические свойства и темизация – большие преимущества этой библиотеки над другими. Если вы хотите поэкспериментировать с созданием стилизованных компонентов React с помощью синтаксиса JavaScript, библиотека glamorous может вас заинтересовать.

• Ссылка на Github.
• Функции: динамические свойства, медиа-запросы, React Native, рендеринг на стороне сервера, стилизация компонентов, темизация

Библиотека styled-jsx

styled-jsx позволяет добавлять теги <style jsx /> внутри функций рендеринга компонентов. Благодаря этому мы можем писать стили в простом CSS. А дополнительное преимущество заключается в том, что CSS внутри них применяется только к текущей области DOM, отображаемой на этом уровне. Если вы хотите объединить CSS внутри своей функции render, styled-jsx идеально вам подойдет.

• Ссылка на Github.
• Возможности: анимация, динамические свойства, рендеринг на стороне сервера, темизация.

Библиотека jsxstyle

jsxstyle позволяет забыть об HTML-элементах, которые вы используете только для стилизации (например, <div />, <span />, <table /> и т.д.), и вместо них использовать стилизованные компоненты (как <Block /> , <Flex />, <Inline />, <Table />). Кроме того, она игнорирует многие нормы CSS и вместо них предоставляет разработчикам интересную возможность указывать псевдо-селекторы в качестве свойств (например, hoverColor). Если вы устали прописывать <div className={styles.container} /> в сотый раз, вам следует попробовать jsxstyle.

• Ссылка на Github
• jsxstyle разрабатывалась как лучший способ стилизовать компоненты React. Ее цель – обеспечить лучший опыт разработчика без ущерба для производительности.
• Возможности: псевдоселекторы.

Библиотека TypeStyle

TypeStyle – это TypeScript CSS, отсюда и название. Основное внимание данная библиотека уделяет линтингу во время компиляции, автозаполнению и другим подобным функциям, которые обеспечивают удобство разработки и предотвращают ряд проблем во время выполнения. Главное преимущество TypeStyle – в том, что она не зависит от фреймворка, так что вы можете использовать ее где угодно. Если вы любите TypeScript, вам стоит взглянуть на TypeStyle.

• Ссылка на Github
• Написание CSS с помощью TypeStyle будет таким же гладким, как и написание JavaScript с помощью TypeScript.
• Возможности: анимация, медиа-запросы, псевдоклассы, рендеринг на стороне сервера.

Библиотека styled-components

Несомненно, самая популярная из библиотек CSS-in-JS. С ее помощью вместо добавления стилей к существующим компонентам вы можете создавать компоненты, воплощающие эти стили. Это позволяет писать декларативные и повторно используемые компоненты, которые представляют собой что-то между обычным HTML-элементом и полноценным компонентом React. К этой философии (и к интерполяции строк в стиле GraphQL) нужно привыкнуть, но, судя по невероятному количеству звезд, оно того стоит.

• Ссылка на Github
• Возможности: анимация, динамические свойства, медиа-запросы, вложенные селекторы, рендеринг на стороне сервера, React Native, стилизация компонентов, темизация

Читайте также: Обработка CSS в React с помощью styled-components

Библиотека glamor

Настоящая сила библиотеки glamor заключается в ее способности писать и комбинировать правила CSS. Обычно расширение и перезапись правил CSS-in-JS – задача не из простых; однако glamor позволяет либо разместить их последовательно внутри свойств компонента, либо перечислить их внутри его className. Если вы ищете надежную библиотеку, обратитесь к glamor.

• Ссылка на Github
• Возможности: медиа-запросы, вложенные селекторы, псевдоселекторы, рендеринг на стороне сервера, React Native, стилизация компонентов, темизация

Библиотека styletron

Популярность пришла к библиотеке styletron благодаря ее скорости, основанной на Virtual CSS (например, Virtual DOM), который абстрагирует преобразование JS-to-CSS и тем самым обеспечивает оптимизацию, ускорение, сокращение мертвого CSS и многое другое. Особое внимание уделяется минимизации CSS при рендеринге на стороне сервера для быстрой загрузки страницы. Если вы ищете хорошую библиотеку, которая обеспечивает огромный прирост скорости, попробуйте styletron.

• Ссылка на Github
• Возможности: анимация, динамические свойства, медиа-запросы, рендеринг на стороне сервера, стилизация компонентов.

Библиотека radium

radium – одна из первых библиотек CSS-in-JS, набор инструментов для управления встроенными стилями элементов React. Эта библиотека дает вам мощные возможности стилизации без CSS. Она пытается решить проблему обработки медиа-запросов, псевдоселекторов и модификаторов. radium по-прежнему входит в число самых популярных библиотек, что говорит о ее практичности и долговечности.

• Ссылка на Github
• Возможности: анимация, медиа-запросы, псевдоселекторы, рендеринг на стороне сервера, стилизация компонентов, темизация.

Библиотека react-css-modules

react-css-modules автоматически сопоставляет CSS модули. Каждому классу CSS присваивается идентификатор локальной области с глобальным уникальным именем. Так данная библиотека позволяет писать модульный и многоразовый CSS.

react-css-modules стремится к написанию чистого CSS в компонентах React. Буквально с ее помощью вы можете импортировать файлы .css и использовать их ключи в свойстве className. Это также одна из первых библиотек CSS-in-JS. Основная проблема, которую она пыталась решить, заключалась в определении области видимости CSS-селекторов. Рекомендуем также попробовать пакет babel-plugin-react-css-modules. Хотя у него меньше функций, зато она гораздо меньше по размеру и при этом гораздо более производительный.

• Ссылка на Github
• Возможности: вложенные селекторы, псевдоселекторы.

Библиотека aphrodite

aphrodite написана и поддерживается Академией Хана. Это одна из первых библиотек CSS-in-JS. Она не зависит от фреймворка и поддерживает рендеринг на стороне сервера и префиксы браузера. Основное внимание она уделяет селекторам, медиа-запросам, анимации. Если вы ищете надежную библиотеку, поддерживаемую квалифицированными разработчиками, используйте aphrodite.

• Ссылка на Github.
• Возможности: анимация, динамические свойства, медиа-запросы, рендеринг на стороне сервера.

Библиотека ReactCSS

Еще одна из базовых библиотек CSS-in-JS, reactcss предоставляет встроенные стили в JS с поддержкой React, React Native, автопрефиксов, псевдоэлементов и медиа-запросов. Она фокусировалась на динамической замене стилей на основе свойств. Хотя сегодня эта функция есть у многих новых библиотек, следует отметить, что раньше ReactCSS опережала всех остальных именно благодаря ей. На эту библиотеку все же стоит обратить внимание, особенно если вам нужна полная поддержка CSS (включая автопрефиксы) или React Native.

• Ссылка на Github
• Возможности: динамические свойства, медиа-запросы, React Native.

Заключение

Теперь вы знакомы с основными библиотеками CSS-in-JS. Еще раз рекомендуем вам обратиться к репозиторию css-in-js, где вы найдете много полезной информации о других библиотеках.