Узнайте EmotionJs во время утреннего кофе – это так просто.

Автор оригинала: FreeCodeCamp Community Member.

Шахар Тайт

EmotionJs – это библиотека CSS-In-JavaScript с невероятными возможностями. Посмотрим, как мир CSS превратился в это решение, а затем глубоко погрузись в то, что вы можете сделать с этим сегодня.

CSS Wars (RECAP)

За последние пару лет мы видели переход к различным типам методов стилизации, все на основе CSS. Вот цик в хронологическом порядке:

Простые старые CSS

Это классический и простой способ нанесения CSS. Ссылаем файл CSS в нашем index.html, и он применяется к нашим HTML-файлам по классическим правилам CSS.

Этот подход имеет проблемы при применении в масштабе, поскольку CSS основан на специфике, который необходимо обрабатывать осторожно, если мы хотим предотвратить столкновения CSS.

Также трудно отлаживать при проверке в браузере. Трудно понять, какая комбинация свойств CSS завершилась, влияющая на стиль, мы видим на теге HTML.

CSS Preprocessors

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

CSS модули

Этот подход был введен, как только веб-разработка начала лечить веб-страницы в виде деревьев компонентов. CSS-модули – это все о стиле компонента самостоятельно, не влияя на другие части пользовательского интерфейса, и их не влияет на них.

После введения CSS-модулей в наш проект каждый компонент ссылается на файл CSS с обычными или предварительно обработанными CSS. Во время процесса сборки наша система сборки (например, WebPack) принимает каждый класс CSS, префиксирует его с именем компонента и суффикстрирует его с уникальным идентификатором, поэтому класс уникален.

Этот подход отлично, так как это очень легко достичь изоляции CSS. Кроме того, легко понять, какие правила CSS были нанесены на наши HTML-элементы и где они возникли. Я был большим сторонником этого подхода – пока эмоция не была освобождена.

CSS-in-js

Этот подход бросит вызов практике изолирующих CSS в файлы CSS. Это позволяет нам указывать наши правила CSS в нашем коде JavaScript в качестве объектов JS.

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

Давайте разработаем этими.

Компоненты в стиле VS Emotion JS!

Стилические компоненты прибыли в первую очередь, и EmotionJs полагался в значительной степени повлиял на него.

Стильные компоненты простые, мелкие комментарии реагирования. Они определяют тег HTML и его стили как функцию реквизит компонента.

Это изолирует семантику HTML и CSS из наших более функциональных компонентов реагирования. Это, в свою очередь, обеспечивает более читаемый и поддерживаемый опыт разработки.

Пример компонентов в стиле:

То, что мы видим здесь, – это кнопка HTML с некоторыми реквизитами CSS.

цвет и Фон Свойства CSS определяются как функция A Первичный опоры, переданный (или нет) к компоненту.

Обратите внимание, как JSX очень прост и семантически, а CSS и HTML-часть изолированы в стилизованный компонент.

Теперь давайте посмотрим на EmotionJs.

Эмоция принимает мощность в стиле компонентов и добавляет еще несколько полезных функций (а также самый крутой логотип в мире).

Давайте продемонстрируем то, что, как я думал, были самыми впечатляющими с эмоциями.

Одна вещь, которую я ненавидел до сих пор, поддерживал CSS Media Queries Отказ

Правила CSS для каждой точки останова проживали в разных областях файлов CSS. Было трудно увидеть и обрабатывать перекрывающиеся свойства.

В EmotionJS мы можем создать постоянную ширину нашей точки останова с помощью библиотеки лицевой связи.

Затем мы можем ссылаться на эту константу, объявив значения свойства CSS для каждой точки останова в одном месте.

Давайте нарушим этот пример вниз:

• Линия 4-9: определяем нашу ширину точек останова, в одном месте в нашем приложении
• Строка 13-23: Мы определяем компонент кнопки, который является тегом DIV с некоторыми свойствами CSS. Его ширина и Высота Значения определяются как массив значений, один для каждой точки останова. Обратите внимание, как нам не нужно указывать PX единицы измерения. Они добавляются автоматически. Также обратите внимание на Фон-цвет Недвижимость в зависимости от Первичный опоры предоставлены компоненту кнопки. Это похоже на пример созданных компонентов.
• Строка 26-33: В нашем компоненте Reaction мы ссылаемся на нашу кнопку EmotionJS и используем ее как метка JSX

Другие особенности Emotionjs

Emotionjs имеет несколько способов достижения некоторых из этих возможностей:

• CSS PROP – мы можем предоставить нашим компонентам реагирования с помощью CSS-припола, который является объектом JavaScript или строка, определяющая наши свойства CSS.

• СМИ могут также быть нацелены на подход CSS

В заключение: хорошее, плохое, а эмоциональное

Плюсы:

• Легко интегрировать и заменить другие решения CSS.
• Легко идентифицировать и удалить мертвый код по сравнению с другими решениями.
• Проще работать со средствами массовой информации, значения собраны вместе.
• Компоненты реагирования становятся более семантическими, поскольку HTML и CSS изолированы.

Минусы:

• С CSS-модулями легко понимать, где правило CSS исходит при проверке в браузере. Это связано с тем, что имена класса генерируются с префиксами имени компонентов RACT. С эмоциями это не происходит.
• Если мы определим свойство CSS для одного медиа-запроса, нам также необходимо определить его для отдыха, так как мы обеспечиваем массив значений. Во многих случаях мы просто хотим обратиться к одному или двум медиа-запросам и оставить других в качестве значения по умолчанию.

Вердикт

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

Это буквально взяла у меня десять минут, чтобы узнать и интегрировать его, и это серьезное улучшение в этой области.

Не забудьте хлопать, если вам понравилось, и следуй за мной в Twitter: https://twitter.com/shahar_taite.