[Перевод] Сравнение производительности CSS и CSS-in-JS в реальном мире

Скрипты и советы | 15 мая 2021

Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании RUVDS.com, Разработка веб-сайтов, CSS, JavaScript, Клиентская оптимизация, разработка, css-in-js, ruvds_перевод,

Технология CSS-in-JS заняла прочное место среди инструментов фронтенд-разработки. И возникает ощущение, что CSS-in-JS-тренд в ближайшем будущем лишь усилится. Особенно — в мире React. Например, в исследовании State of CSS, проведённом в 2020 году, приняли участие 11492 человека. Лишь 14,3% из них не слышали о Styled Components (о ведущей CSS-in-JS-библиотеке). А вот пользовались этой библиотекой более 40% участников исследования.



Мне уже давно хотелось найти серьёзный материал, посвящённый сравнению производительности CSS-in-JS-библиотек, вроде Styled Components, и доброго старого CSS. Но я, к сожалению, ничего такого, вроде сравнения их производительности на реальном проекте, а не на каком-то простом наборе тестов, найти не смог. Поэтому я решил сам сделать такое сравнение. Я перевёл реальное приложение со Styled Components на Linaria, на библиотеку, которая выполняет извлечение CSS в файлы во время сборки проекта. В результате в приложении, использующем Linaria, не выполняется генерирование стилей во время работы этого приложения на компьютере пользователя.
Читать дальше →
[Перевод] Анонс новой версии Styled Components v5: Звериный оскал

Мы очень рады анонсировать новую пятую версию styled-components! Новая версия полностью обратно совместима с предыдущей...

Подробнее
[Перевод] Знакомство с Styled components 

Предлагаем вашему вниманию перевод свежей ознакомительной статьи Cаши Грифа (Sacha Greif), соавтора книги «Discover...

Подробнее
[Перевод] Эволюция CSS: от CSS, SASS, BEM и CSS–модулей до styled-components

С самого начала истории интернета мы нуждались в стилях для наших сайтов. Многие годы нам для этого служил CSS,...

Подробнее
Оптимизация производительности фронтенда. Часть 1. Critical Render Path

Здравствуйте. Меня зовут Ник, я фронтенд разработчик (жидкие аплодисменты). Кроме того, что я пишу код, я преподаю в...

Подробнее
Веб-компоненты в реальном мире (часть 2)

Прошло больше года с моей публикации "Веб-компоненты в реальном мире" и у меня накопились новые наблюдения, что ещё не...

Подробнее
Крутые трюки с переменными CSS

Переменные в CSS (или custom properties, кому как удобнее) изначально задумывались для хранения повторяющихся свойств...

Подробнее

Написать комментарий

  • Смайлы и люди
    Животные и природа
    Еда и напитки
    Активность
    Путешествия и места
    Предметы
    Символы
    Флаги