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

Посмотреть живую демонстрацию Polymorph + React

В наши дни React очень популярен, и есть много претендентов на обработку ваших стилей при использовании React и JavaScript, но ни один из них не сделал то, что я хотел, так, как я хотел. Имея приблизительное представление об API, который я хотел использовать, я решил создать свой собственный инструмент. Несколько месяцев спустя у меня появился готовый инструмент под названием Polymorph, который, как я убедился, будет хорошо работать с моими компонентами React (но я также хотел, чтобы он был достаточно переносимым, чтобы работать и вне проектов React).

Чтобы увидеть, как это работает, давайте создадим аккордеон, используя React + хуки, а затем стилизуем его с помощью Polymorph. Пока будем считать, что аккордеон ранее был оформлен с помощью CSS, с использованием соглашения об именах БЭМ (это важно). Это оставляет нам что-то вроде:

Это отобразит HTML в DOM, где предположительно также существует какой-то файл CSS. Учитывая существующие доступные инструменты, если бы перед вами стояла задача заменить стили CSS на стили JavaScript, вам, вероятно, пришлось бы значительно реорганизовать описанное выше, назначив определенные правила соответствующим блокам вручную. Polymorph был создан для работы с элементами БЭМ, поэтому, если разметка напоминает БЭМ, Polymorph может определить, какие элементы стилизовать, только по имени элемента БЭМ. Это означает, что API стилей для аккордеона может существовать как простой объект JavaScript, например:

Поскольку Polymorph предполагает работать с интерфейсом БЭМ, он может интеллектуально определять, соответствует ли ключ какому-либо существующему имени дочернего элемента; если это так, он найдет эти элементы и применит соответствующие стили.

Вы можете делать довольно интересные вещи с Polymorph, особенно в сочетании с такими инструментами, как sQuery (библиотека JavaScript для взаимодействия с элементами DOM, которые следуют соглашению об именах BEM). Вышеприведенное можно переписать так:

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

Добавление компонентов React

Теперь, когда у нас есть объект стилей, нам просто нужно каким-то образом предоставить его нашему компоненту React. Polymorph работает, передавая элемент DOM (который должен быть родительским блоком BEM) и объект стилей:

polymorph(Element, styles);

Итак, думая в терминах React, нам нужно было бы вызвать эту функцию в методе жизненного цикла componentDidMount компонента (или, если используются хуки, используя ловушку эффекта), передав reference базовому узлу DOM. генерируется из компонента React. Метод repaint() Polymorph должен быть вызван в методе жизненного цикла componentDidUpdate компонента React (или, если используются хуки, с помощью ловушки эффекта), чтобы всякий раз, когда React обновляет DOM, Polymorph мог затем перерисовывать его соответствующим образом.

Использование компонентов класса:

Использование функциональных компонентов:

Улучшение React API

Почти все согласны с тем, что БЭМ уродлив, и то, что наш код React пронизан именами классов БЭМ, наполняет меня отчаянием. Код React можно улучшить, чтобы он больше напоминал философию БЭМ, а также лучше обрабатывал стили:

…предполагая, что styles находится в области видимости и ссылается на объект стилей, он просто передается в styles prop. Это достигается использованием Lucid library, представляющей собой библиотеку компонентов высшего порядка для рендеринга БЭМ-разметки.

Причина, по которой мне нравится этот подход к обработке стилей с помощью JavaScript в контексте React, заключается в том, что он не требует слишком большого вмешательства в вещи React; мы можем полностью отделить наш объект стилей от компонента React без их слишком тесной связи, что при использовании чего-то вроде Стили компонентов было бы верным как раз наоборот. Точно такой же объект стилей можно было использовать в другом проекте, в котором даже не использовался React, что делало его чрезвычайно переносимым.

Надеюсь, вы получили что-то от чтения этой статьи, если нет, всегда есть в следующий раз!