Олег Изонен
Недавно я написал более высокий уровень Обзор CSS-In-JS , в основном говорить о проблемах, которые этот подход пытается решить. Авторы библиотеки редко вкладывают время в описание компромиссов их решения. Иногда это потому, что они слишком предвзяты, а иногда они просто не знают, как пользователи применяют инструмент. Так что это попытка описать компромисс, которые я видел до сих пор. Я думаю, что важно упомянуть, что я автор Jss. Так что мне следует считаться предвзятым.
Социальное влияние
Есть слой людей, которые работают на веб-платформе и не знают никакого JavaScript. Эти люди платят за писать HTML и CSS. CSS-IN-JS внес огромное влияние на рабочий процесс разработчиков. Поистине преобразующее изменение никогда не может быть сделано без оставшихся некоторых людей. Я не знаю, должен ли CS-in-JS быть единственным способом, но массовое усыновление представляет собой четкий признак проблем с использованием CSS в современных приложениях.
Большая часть проблемы – это наша неспособность точно общаться с использованием случаев, когда CSS-in-js сияет и как правильно использовать его для задачи. Многие энтузиасты CSS-IN-JS были успешными при продвижении технологий, но не так много критиков говорили о компромиссах конструктивным образом, не принимая дешевые качели на инструменты. В результате мы оставили много компромиссов, скрытых и не приложили сильные усилия, чтобы обеспечить объяснение и обходные пути.
CSS-IN-JS – это попытка сделать сложные случаи использования.
Стоимость выполнения
Когда CSS генерируется из JavaScript во время выполнения, в браузере есть присущий накладные расходы. Время выполнения варьируется от библиотеки в библиотеку. Это Это хороший общий тест, но обязательно сделайте свои собственные тесты. Основные различия во время выполнения появляются в зависимости от необходимости иметь полноценный разбор CSS для шаблонов, объем оптимизаций, динамических стилей, деталей реализации, алгоритма хеширования и стоимости структурных интеграций. *
Помимо потенциального накладных расходов времени выполнения, вам необходимо рассмотреть 4 различных стратегиях объединения, поскольку некоторые библиотеки CSS-in js поддерживают несколько стратегий, и он должен применить их. *
Стратегия 1: только поколение времени выполнения
Время выполнения CSS – это методика, которая генерирует строку CSS в JavaScript, а затем вводит эту строку с помощью тега стиля в документ. Эта техника производит стиль листа, а не встроенные стили.
Компромисс генерации времени выполнения – это неспособность обеспечить стиль содержания на ранней стадии, поскольку документ запускает загрузку. Этот подход обычно подходит для приложений без контента, который может быть полезным немедленно. Обычно такие приложения требуют взаимодействия пользователей, прежде чем они действительно могут стать полезными для пользователя. Часто такие приложения работают с контентом, который настолько динамичен, что он устарел, как только вы загрузите его, поэтому вам нужно установить конвейер обновления рано, например, Twitter. Кроме того, когда пользователь вошел в систему, нет необходимости предоставлять HTML для SEO.
Если взаимодействие требует JavaScript, пакет должен быть загружен до того, как приложение будет готово. Например, вы можете показать содержимое канала по умолчанию при загрузке провисания в документе, но вполне вероятно, что пользователь захочет изменить канал сразу после этого. Поэтому, если вы загрузили начальное содержание, просто немедленно выбросить их.
Воспринимаемая производительность таких приложений может быть улучшена с заполнятелями и другими хитростями, чтобы позволить приложению чувствовать себя более мгновенно, чем на самом деле. Такие приложения обычно являются тяжелыми данными в любом случае, поэтому они не будут полезны так же быстро, как статью.
Стратегия 2: поколение времени выполнения с критическими CSS
Критические CSS – это минимальное количество CSS, которое требуется для стиля страницы в его начальном состоянии. Он отображается с помощью тега стиля в главе документа. Эта техника широко используется с помощью и без CSS-in-js. В обоих случаях вы, вероятно, будете удвоить правила CSS один раз в качестве части критических CSS и один раз в рамках в виде пакета JavaScript или CSS. Размер критических CSS может быть довольно большим в зависимости от количества содержания. Обычно документ не будет кэширован.
Без критических CSS статическая контент-тяжелая приложение одностраничного страницы с помощью CSS-in-js выполнения придется показать заполнителям вместо контента. Это плохо, потому что он мог быть полезен для пользователя гораздо раньше, улучшая доступность на низких устройствах и для соединений с низкой пропускной способностью.
С критическими CSS, генерация CSS выполнения может быть сделана на более поздней стадии, не блокируя пользовательский интерфейс на начальной фазе. Будьте предупреждены, хотя на низких мобильных устройствах, которые примерно 5 лет, генерация CSS от JavaScript может оказать негативное влияние на производительность. Он сильно зависит от количества генерируемых CSS и используемой библиотеки, поэтому она не может быть обобщена.
Компромисса этой стратегии является стоимость критических экстракционов CSS и стоимость генерации CSS Runtime.
Стратегия 3: добыча сборки Только
Эта стратегия – это по умолчанию на Интернете без CSS-IN-JS. Некоторые библиотеки CSS-In-JS позволяют извлечь статические CSS в течение времени сборки. * В этом случае настраиваемые накладные расходы времени выполнения, CSS отображается на странице, используя тег ссылки. Стоимость генерации CSS выплачивается раньше времени.
Здесь 2 основных компромисса:
- Вы не можете использовать некоторые из динамических предложений CSS-in-rapis CSS-js во время выполнения, потому что у вас нет доступа к состоянию. Часто вы до сих пор не можете использовать пользовательские свойства CSS, потому что они не поддерживаются в каждом браузере и не могут быть многофильманы по сравнению со временем сборки по природе. В этом случае вам придется выполнять обходные пути для динамичной тематической и государственной стайлинга. *
- Без критических CSS и с пустым кешем вы заблокируете первую краску, пока не загружается пучок CSS. Элемент ссылки в головке документа блокирует рендеринг HTML.
- Недетерминированная специфичность с расщеплением пакета на основе страниц в приложениях одной страницы. *
Стратегия 4: добыча сборки пореации с критическими CSS
Эта стратегия также не является уникальной для CSS-in-js. Полная статическая экстракция с критическими CSS обеспечивает наилучшую производительность при работе с более статическим приложением. Этот подход по-прежнему имеет вышеупомянутые компромисс статических CSS, за исключением того, что тег блокировки Link может быть перемещен в нижнюю часть документа.
Существует 4 основных стратегии рендеринга CSS. Только 2 из них относятся к CSS-In-JS, и ни один из них не распространяется на все библиотеки.
Доступность
CSS-in-js может уменьшить доступность при использовании не в том порядке. Это произойдет, когда в основном статический сайт содержимого реализован без критической экстракции CSS, чтобы HTML нельзя нарисовать до загрузки и оценки и оцененного пакета JavaScript. Это также может произойти, когда оказывается огромный файл CSS, используя тег блокирующего звена в головке документа, который является наиболее популярной текущей проблемой с традиционным встраиванием и не специфична для CSS-in-js.
Разработчики должны взять на себя ответственность за доступность. Есть еще сильная ошибательная идея, что нестабильное подключение к Интернету является проблемой экономически слабых стран. Мы склонны забывать, что у нас есть проблемы со связью каждый день, когда мы входим в подземную железнодорожную систему или большое здание. Стабильное мобильное соединение без кабеля – это миф. Еще не легко иметь стабильное соединение Wi-Fi, например, сеть Wi-Fi 2,4 ГГц может получить помехи от микроволновой печи!
Стоимость критических CSS с рендерингом бокового сервера
Чтобы получить критическую экстракцию CSS для CSS-In-JS, нам нужен SSR. SSR – это процесс создания конечного HTML для данного состояния приложения на сервере. На самом деле это может быть довольно сложный и дорогой процесс. Это требует определенного количества циклов ЦП на сервере для каждого HTTP-запроса.
CSS-IN-JS обычно использует тот факт, что он подключен к конвейеру HTML-рендеринга. * Он знает, что оказано HTML, и какие CSS это необходимо, чтобы он мог производить абсолютное минимальное количество этого. Критические CSS добавляют дополнительные накладные расходы на визуализацию HTML на сервере, потому что CSS также должен быть скомпилирован в конечную строку CSS. В некоторых сценариях трудно или даже невозможно кэшировать на сервере.
Рендеринг черный ящик
Вам необходимо знать о том, как используемая вами библиотека CSS-In-JS, рендерирует ваши CSS. Например, люди часто не знают о том, как в стиле компонентов и эмоций реализуют динамические стили. Динамические стили – это синтаксис, который позволяет использовать функции JavaScript внутри декларации стилей. Эти функции принимают опоры и возврат блока CSS.
Для того, чтобы сохранить специфичность исходности по порядку по порядку, оба вышеуказанные библиотеки генерируют новое правило CSS, если он содержит динамическое объявление и обновления компонентов с новыми реквизитами. Чтобы продемонстрировать, что я имею в виду, я создал эта песочница Отказ В JSS Мы решили сделать другой компромисс, что позволяет нам обновлять динамические свойства без генерации новых правил CSS. *
Крутая кривая обучения
Для людей, которые знакомы с CSS, но являются новыми для JavaScript, начальное количество работ, чтобы встать на скорость с CSS-js, может быть довольно большой.
Вам не нужно быть профессиональным разработчиком JavaScript для записи CSS-in-js, до того, как задействовано сложная логика. Мы не можем обобщить сложность стиля, так как это действительно зависит от случая использования. В тех случаях, когда CSS-in-JS получает комплекс, вполне вероятно, что реализация с ванильными CSS будет еще более сложной.
Для базового стиля CSS-In-JS необходимо знать, как объявить переменные, как использовать шаблонные строки и интерполировать значения JavaScript. Если используется Object-Notiation, нужно знать, как работать с объектами JavaScript и синтаксисом на основе объектов, ориентированным на библиотеке. Если участвует динамический стиль, нужно знать, как использовать функции и условные функции JavaScript.
В целом есть кривая обучения, мы не можем это отрицать. Эта кривая обучения обычно не намного больше, чем, чем учить SASS. На самом деле, я создал это EGGHEAD курс продемонстрировать это.
Нет совместимости
Большинство клиентов CSS-In-JS не взаимозаменяются. Это означает, что стили, написанные с помощью одной библиотеки, не могут быть отображены с использованием другой библиотеки. Практически это означает, что вы не можете легко переключить все свое приложение из одной реализации в другую. Это также означает, что вы не можете легко поделиться вашим пользовательским интерфейсом NPM, не принося свою библиотеку CSS-js в комплект потребителя, если у вас нет статической экстракции для ваших CSS.
Мы начали работать на Формат ISTF Это должно исправить эту проблему, но, к сожалению, у нас еще нет времени, чтобы получить его до готового производства. *
Я думаю, что совместное использование многоразовых структурных компонентов Agnostic UI в общественном домене все еще является общепринятым проблемой.
Безопасность рисков
Можно представить утечки безопасности с CSS-In-JS. Как и с любыми клиентскими приложениями, вам нужно избежать ввода пользователя, прежде чем рендеринг его всегда.
Эта статья даст вам больше понимания и некоторых измерений.
Непричитанные названия классов
Некоторые люди все еще думают, что важно, чтобы мы сохраняем значимые читаемые имена классов в Интернете. В настоящее время многие библиотеки CSS-In-JS обеспечивают значимые названия классов на основе имени декларации или имени компонента в режиме разработки. Некоторые из них даже позволяют настроить функцию генератора имени класса.
Однако в режиме производства большинство из них генерируют более короткие имена для меньшей полезной нагрузки. Это компромисс Пользователь библиотеки должен сделать и настроить библиотеку при необходимости.
Заключение
Существует компромисс, и я, вероятно, даже не упомянул их всех. Но большинство из них не универсально распространяются на все CSS-IN-JS. Они зависят от какой библиотеки, которую вы используете, и как вы его используете.
* Это примет специальную статью, чтобы объяснить это предложение. Дайте мне знать на Twitter ( @ oleg008 ) О каком из них вы хотели бы прочитать больше.
Оригинал: “https://www.freecodecamp.org/news/the-tradeoffs-of-css-in-js-bee5cf926fdb/”