Что это простыми словами
Emotion — это инструмент, который позволяет фронтенд-разработчикам задавать внешний вид элементов прямо там же, где они описывают сам элемент, а не в отдельном файле.
Аналогия: представьте режиссёра театра. Раньше он писал список реквизита в одной тетради, а описание сцен — в другой. Приходилось постоянно листать между ними: «Стоп, какой плащ у Гамлета? Где я это записал?» Emotion — как будто режиссёр может писать прямо в сценарии: «входит Гамлет (в чёрном плаще, с мечом)». Всё в одном месте, не нужно прыгать между документами.
В коде это значит: рядом с кнопкой сразу написано, что она синяя, с округлыми углами и белым текстом. Разработчику не надо открывать другой файл и искать там стили.
Официальное определение
Теперь, когда суть понятна, вот как Emotion описывают в вакансиях и документации. Эту формулировку вы встретите у заказчика и в резюме — и теперь будете понимать, что за ней стоит.
«Emotion — библиотека CSS-in-JS для React, позволяющая писать стили с помощью JavaScript, с поддержкой серверного рендеринга, автоматической генерации критических стилей и композиции».
Разберём по словам. «CSS-in-JS» — стили (цвета, размеры, отступы) описываются не в отдельных файлах .css, а прямо в коде JavaScript. «Серверный рендеринг» — страница формируется на сервере до того, как попадёт в браузер пользователя. «Критические стили» — минимальный набор стилей, нужный для первой отрисовки страницы, чтобы она не моргала белым экраном. «Композиция» — возможность собирать стили из кусочков, как конструктор, и переиспользовать их.
Какую задачу решает
Раньше стили лежали в отдельных CSS-файлах. Три главные проблемы:
Приходилось прыгать между файлами: «Где я задал цвет этой кнопки?»
Нужно было придумывать уникальные названия классов, чтобы стили одного элемента случайно не перезаписали стили другого.
Неиспользуемые стили накапливались мёртвым грузом — удалили компонент, а стили забыли почистить.
Emotion решает это: стили живут прямо рядом с компонентом, который они оформляют. Названия классов генерируются автоматически, поэтому конфликты исключены. Удалили компонент — его стили тоже исчезли, ничего лишнего не осталось.
Побочная польза: легко менять стили в зависимости от данных. Например, кнопка станет красной, если произошла ошибка, — условие прописывается тут же, в коде.
К какой экосистеме относится
Язык — JavaScript (часто вместе с TypeScript).
Фреймворк — React. Формально Emotion можно использовать и без React, но в 99% случаев вы встретите его именно в связке с React.
Специальность — frontend-разработчик.
Чем заменяется
Самый близкий аналог — styled-components. Это ещё одна CSS-in-JS библиотека с той же идеей: стили в JavaScript-коде. Отличаются синтаксисом и деталями реализации, но задача одна.
Также есть готовые UI-библиотеки с компонентами и встроенной стилизацией: MUI, Ant Design, Chakra UI. Они дают не только способ писать стили, но и готовые кнопки, формы, таблицы. В проектах с ними Emotion обычно не нужен — у них своя система стилизации.
Главное: переход между Emotion и styled-components дешёвый. Разработчик, который работал с Emotion, освоит styled-components за считаные дни — принцип тот же, меняется только синтаксис. Это не разные профессии, а разные инструменты для одной работы.
Что не путать
Emotion ≠ CSS. CSS — это отдельный язык для стилей, а Emotion позволяет писать стили на JavaScript.
Emotion ≠ React. React — это фреймворк для создания интерфейса, Emotion — лишь одна из библиотек рядом с ним, отвечающая за внешний вид.
Emotion ≠ UI-библиотека типа MUI или Chakra UI. Те дают готовые компоненты (кнопки, формы, меню), Emotion даёт только способ писать стили для любых элементов.
Emotion ≠ Tailwind CSS. Tailwind — это готовые короткие классы для стилизации, а Emotion — способ писать стили в JavaScript-коде.
Насколько это важно при отборе
Короткий ответ: обычно это НЕ повод отбраковывать кандидата.
Самая частая ошибка новичка-рекрутера — искать строго «React + Emotion» и отсеивать сильного разработчика, у которого в резюме указан styled-components или опыт с MUI. Человек освоит Emotion за несколько дней, потому что задача та же. Отсеивая по конкретной библиотеке стилизации, вы теряете хороших кандидатов и затягиваете поиск.
Правильный подход: смотрите, есть ли у кандидата опыт с любым современным способом стилизации в React — CSS-in-JS, CSS-модули, Tailwind или работа с готовыми UI-библиотеками. Если есть — этого достаточно. Если в вакансии жёстко написано «только Emotion», уточните у нанимающего менеджера, действительно ли это принципиально: часто оказывается, что нет.
Когда всё же стоит обратить внимание: если у кандидата вообще нигде не упомянута стилизация компонентов, а проект большой и визуально сложный — это повод спросить, как он работал со стилями в предыдущих проектах.
Это общий ориентир. В разных компаниях требования отличаются, поэтому всегда сверяйтесь с текстом конкретной вакансии.