Что это?
Emotion — это производительная и гибкая библиотека CSS-in-JS для JavaScript: вы пишете стили прямо в JS-коде вместо отдельных CSS-файлов. Это одна из самых популярных библиотек в своей области.
Emotion — это производительная и гибкая библиотека CSS-in-JS для JavaScript: вы пишете стили прямо в JS-коде вместо отдельных CSS-файлов. Это одна из самых популярных библиотек в своей области.Это только для React или работает и с другими фреймворками?Это универсальная JavaScript-библиотека, которая лучше всего известна в экосистеме React, но в экосистеме есть также адаптеры для Vue, Nuxt и Ember.
Это универсальная JavaScript-библиотека, которая лучше всего известна в экосистеме React, но в экосистеме есть также адаптеры для Vue, Nuxt и Ember.Как добавить её в проект?Установите пакет через npm или yarn (например, npm install @emotion/react). Судя по Quick Start, начать работа можно с одного импорта; подробности — на странице Install в документации.
Установите пакет через npm или yarn (например, npm install @emotion/react). Судя по Quick Start, начать работа можно с одного импорта; подробности — на странице Install в документации.Нужно ли настраивать плагин Babel, чтобы всё работало?Нет, плагин Babel необязателен. Он не требуется, но даёт некоторые оптимизации и возможности настройки, а в документации есть таблица возможностей, где точно показано, что вы получаете с ним.
Нет, плагин Babel необязателен. Он не требуется, но даёт некоторые оптимизации и возможности настройки, а в документации есть таблица возможностей, где точно показано, что вы получаете с ним.Почему стоит использовать её вместо обычных CSS-файлов?Стили предсказуемо комбинируются, так что вы избегаете проблем с приоритетами CSS, получаете source maps и подписи для отладки, а в продакшен-сборках применяется агрессивное кэширование для повышения производительности.
Стили предсказуемо комбинируются, так что вы избегаете проблем с приоритетами CSS, получаете source maps и подписи для отладки, а в продакшен-сборках применяется агрессивное кэширование для повышения производительности.Это готово к продакшену или скорее эксперимент?Библиотека проверена в бою: в разделе «In the Wild» перечислены продакшен-сайты вроде The New York Times, Sentry, Codecademy, Postmates и Apache Superset, а также библиотеки компонентов, построенные на ней.
Библиотека проверена в бою: в разделе «In the Wild» перечислены продакшен-сайты вроде The New York Times, Sentry, Codecademy, Postmates и Apache Superset, а также библиотеки компонентов, построенные на ней.Работает ли она вне браузера, например в приложениях на React Native?Да, в экосистеме есть поддержка Emotion Native, включая emotion-native-extended для более удобной стилизации с React Native Extended Stylesheet.
Да, в экосистеме есть поддержка Emotion Native, включая emotion-native-extended для более удобной стилизации с React Native Extended Stylesheet.Как на самом деле писать с ней стили?Можно использовать строковые или объектные стили через css prop или API styled. Композиция, вложенные селекторы и медиа-запросы — всё это поддерживается и описано в документации.
Можно использовать строковые или объектные стили через css prop или API styled. Композиция, вложенные селекторы и медиа-запросы — всё это поддерживается и описано в документации.Можно ли попробовать, ничего не устанавливая?Да, в README есть ссылка на живое демо в CodeSandbox, так что можно поиграться с Emotion прямо в браузере, прежде чем добавлять её в проект.
Да, в README есть ссылка на живое демо в CodeSandbox, так что можно поиграться с Emotion прямо в браузере, прежде чем добавлять её в проект.Есть ли вокруг неё инструменты, например для линтинга?Да, в экосистеме есть интеграция со stylelint, а также вспомогательные библиотеки вроде facepaint и css-in-js-media для адаптивного дизайна и polished для миксинов в духе Sass в JS.
Да, в экосистеме есть интеграция со stylelint, а также вспомогательные библиотеки вроде facepaint и css-in-js-media для адаптивного дизайна и polished для миксинов в духе Sass в JS.What are similar projects?stylex, chakra-ui, inferno, styled-components, react-native-web, formatjs, tamagui, velocity
stylex, chakra-ui, inferno, styled-components, react-native-web, formatjs, tamagui, velocityWhich topics is it in?css-in-js, styling, babel, reactjs, monorepo, javascript-library, css, ui, web-development, performance, react, npm
css-in-js, styling, babel, reactjs, monorepo, javascript-library, css, ui, web-development, performance, react, npm