Emotion — это библиотека CSS-in-JS для JavaScript и React, которая позволяет писать стили прямо внутри компонентов в виде JavaScript-кода. Если вы встретили в чужом проекте импорт вида @emotion/react или @emotion/styled и непонятный синтаксис с обратными кавычками — это именно она. Библиотека генерирует CSS на лету, присваивает классам уникальные хэш-имена и подставляет стили в документ автоматически.
Подход решает сразу несколько задач: стили живут рядом с компонентом, имена классов не конфликтуют между файлами, а неиспользуемый CSS удаляется вместе с компонентом. Ниже разберём, как устроен Emotion, чем отличаются его два основных API и когда его стоит выбирать вместо обычных CSS-файлов или альтернатив вроде styled-components.
Как устроен CSS-in-JS и место Emotion в этой концепции
Идея CSS-in-JS проста: вместо отдельного файла styles.css описание стилей хранится в JS-объекте или шаблонной строке. Библиотека во время выполнения (или на этапе сборки) превращает это описание в настоящие CSS-правила и вставляет их в <style>-тег внутри документа.
Emotion — одна из самых распространённых реализаций этого подхода. Она состоит из нескольких пакетов: ядро @emotion/css работает без фреймворков, а @emotion/react и @emotion/styled добавляют интеграцию с React. Отдельный пакет @emotion/cache управляет вставкой стилей и позволяет настраивать префиксы, порядок правил и SSR.
Ключевая особенность — сериализация стилей: Emotion вычисляет хэш от содержимого стиля и использует его как имя класса. Одинаковые стили получают одинаковый класс, поэтому дубли в итоговом CSS исключаются автоматически.
💡Emotion превращает JS-описание стилей в реальный CSS с уникальными хэш-классами и вставляет его в документ автоматически — без ручного управления именами классов.