Главная » Статьи » Как сделать CSS реактивным!

Как сделать CSS реактивным!

Как сделать CSS реактивным!

От автора: итак, представьте себе эту сцену, мы на технической конференции в вашем родном городе, и к вам подходит странный разработчик (это я), я говорю вам. Эй, ваш CSS реактивный?

Вы можете подумать примерно следующее: «Должен ли я ответить на этот вопрос? Будет ли долгая пауза неловкой. Что такое реактивный? Зачем нам делать CSS реактивным? И наконец … Эй, не надо говорить за меня».

Что такое реактивное программирование?

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

Зачем мне делать CSS реактивным?

Я слышу вас, вы можете подумать, что это какой-то розыгрыш?

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

Что, если бы я сказал такое? Прекратите стилизовать элементы DOM! Слишком для вас? Как бы вы сделали красивый интерфейс?

Да, это немного глупо, не правда ли? Пользовательские свойства CSS существуют уже некоторое время, они позволяют стилизовать то, что вы могли бы считать своего рода указателем, а не элементом стиля. Я считаю, что переменные — лучший способ для получения повторяемых результатов на любом языке, это то, что вам нужно для единообразного дизайна, верно? Теперь, чтобы прояснить, я все еще говорю о классах стилей и т. д., как обычно, но при необходимости используйте больше переменных во время выполнения. Я скоро поясню это.

Более того, пользовательские свойства могут иметь несколько полезных функций.

уменьшение объема при применении к таким элементам, как root

изменения в реальном времени

собственный синтаксис

хранение данных, которые CSS не понимает

быстрые вычисления

Совет

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

Хорошо, вернемся к истории; Вы ушли домой, размышляя, о чем я, черт возьми, говорил, re.css, что это?

Вот то, что, я надеюсь, однажды появится, когда вы загуглите re.css.

re.css — это руководство по стилю и сопутствующая библиотека, которая является ответвлением css-in-js, их цели — обеспечить повышенную производительность, разделение задач и улучшенный UX.

Разделение задач?

Если вы когда-либо стилизовали что-то в JavaScript, будь то vanilla, React, Vue или Angular, у вас случалось нечто подобное.

HTML загружается и анализируется

CSS загружает синтаксический анализ и рендеринг, просматривая дерево DOM на предмет селекторов. На самом деле CSSOM это еще не все, но я вернусь к этому в другой раз

JavaScript загружает несколько скриптов, может быть, ваши пакеты или ESM, а затем отображает строки HTML.

Если строка HTML содержит CSS, он применяется, как и раньше

Уф, на самом деле это было действительно упрощенное описание загрузки типичного SPA без SSR, и даже этого было много. Это почти как сделать одно и то же дважды, это то, из-за чего вы затем можете увидеть, вспышку ужасного белого нестилизованного контента, который никто никогда не хочет видеть, ваши пользователи хотят видеть что угодно, только не это. Это все равно, что сотрудник отеля плюет в вас. Правда, не очень гостеприимно?

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

Что, если бы мы поступили по-другому, мы установили бы переменную CSS в таблице стилей, а затем стилизовали элемент заполнителя, в котором отрисовывается наш компонент, после загрузки JS мы передаем ответственность за эту переменную или набор переменных JavaScript, потому что это проще. Не говоря уже о том, что с пользовательскими свойствами CSS можно взаимодействовать с помощью JavaScript! Вы бы увидели что-то, что могло бы иметь некоторое сходство с вашим контентом перед загрузкой в него. Больше никаких вспышек нестилизованного контента.

Но все становится лучше, если все ваши переменные CSS и стили в основном находятся в таблицах стилей, все, что вам нужно сделать, это установить свойство на стороне JavaScript (я упоминал, что они являются указателями, как при использовании сценариями) и позволить браузеру обрабатывать остальное, дальнейших вычислений из JavaScript не требуется.

Но это неправда. Я слышу, как вы плачете: «Я использую CSS-in-JS потому, что могу вычислять стили на основе других стилей или данных». Пример: если фон серый, то во вторник граница будет синяя и шириной в 3 пикселя. Что ж, оказывается, что CSS — это логично благодаря calc, и мы по-прежнему можем нести ответственность за CSS.

Calc

Вы можете делать ВСЕ с помощью чистого CSS. Наверняка, когда вы впервые столкнулись с функцией calc, ваш разум говорит, это математическая логика в реальном времени, потрясающе! Тогда вы поймете, что у JavaScript есть доступ к большему количеству вещей! CSS не может сказать мне, где находится курсор мыши, поэтому логика немного ограничена тем, что находится внутри таблицы стилей и области просмотра.

Вот почему ведутся дебаты о чистом CSS и JavaScript, re.css говорит что-то еще, позвольте им обоим стать друзьями и каждому использовать свои сильные стороны, а не брать на себя ответственность за другого. Прежде чем мы продолжим, нужно знать несколько вещей.

/* calc может быть вложенной */
/* пользовательские свойства CSS – это валидные значения calc */
calc( calc( var(--the-room-is-dark) * 200) - 20);

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

Итак, похоже, что мы переместили значительную часть нашей логики стилей в таблицы стилей, но как насчет другого пути, я упомянул, что вы можете хранить в CSS значения, которые CSS не понимает — зачем мне это делать? Вот пример:

:root { --current-theme: light; --theme-text-color: #000; --theme-bg-color: #fff;
}

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

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

Представьте, что внешние изменения просто заставляют JavaScript запускать функции, которые инициируют красивую цепную реакцию логики стилизации, что по сути то, о чем я говорю (но CSS не может напрямую запускать observable, JS должен обрабатывать это, см. комментарии). Это только 90% того, что я намеревался сделать, и всегда есть версия 2.0.0. Но в любом случае я хочу с вами поделиться.

Автор: Adam Crockett

Источник: https://dev.to

Редакция: Команда webformyself.