Главная » Статьи » Styled-components CSS V4: хорошие, плохие и совершенно другие

Styled-components CSS V4: хорошие, плохие и совершенно другие

Styled-components CSS V4: хорошие, плохие и совершенно другие

От автора: я хочу полюбить styled components CSS, действительно хочу. На самом деле, меня настолько взволновали эти симпатичные новые вещи в версии 4, что я потратил одно дождливое субботнее утро на то, чтобы преобразовать проект из Vanilla CSS в стилизованные компоненты. Хотя я мог в это время прыгать в лужах.

Мой процесс: я переименовал файлы CSS в JS и заменил имена классов на экспортированные константы. То, что получилось в результате, довольно интересно:

Теперь: JS. Но раньше, CSS

(Люди, которые беспокоятся о «CSS в JS», успокойтесь — это просто другой механизм для определения отношений между узлами CSS и DOM.) Преобразовав классы CSS в «стилизованные компоненты», я включил их в разметку. До свидания className.

Эта <Panel> была интересной. Раньше это был компонент, который должен был только создавать div с тенью и возвращать дочерние элементы. И я хотел ввести класс, чтобы добавить для этого экземпляра немного дополнительного пространства внизу. В мире стилизованных компонентов я создаю базовый компонент, например, так:

А затем, когда я хочу «расширить» эту панель, чтобы создать вариант:

(Для записи потребовалось 12 минут рефакторинга, чтобы это не выглядело так странно.)

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

Большинство вещей, которые влияют на отображение

Еще одна вещь, которая влияет на отображение

Теперь я могу просто создать компонент с именем <Mark>, и он обрабатывает все мои стили. Обратите внимание на свойство left, между top и bottom:

Все стили в одном месте

Я могу избавиться от этих свойств className и style, оставив супер чистый код:

Моему родительскому компоненту больше не нужно знать, как позиционировать элемент, поэтому в JavaScript больше нет синтаксиса CSS.

Эти изменения могут показаться незначительными, но они дают преимущества, как для «разделения проблем», так и для «декларативный прежде императивного».

И если вам интересно, медиа-запросы выглядят точно так же, как и должны выглядеть медиа-запросы:

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

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

Поэтому вопрос, на который я должен был ответить, прежде чем начать слияние — будут ли компоненты замедлять мой сайт? Вот как быстро мое приложение переключается с одной страницы на другую (страница имеет ~2000 узлов DOM). Я повторил тест пять раз для Vanilla CSS и стилизованных компонентов:

Черт!

Это довольно заметное увеличение на 50%. Я ни за что не отправлю это своим пользователям, независимо от того, насколько мне нравится опыт разработки.

Что насчет начального времени загрузки? Пакет styled-components добавляет 13 Кбайт к моим 40 Кбайт ресурсов, поэтому это, вероятно, не очень хорошо — если вы читаете это с маленькими детьми поблизости, я предлагаю вам попросить их смотреть в другую сторону.

Дерьмо!

Черт возьми, это однозначное НЕТ для стилизованных компонентов. Это, наверное, урок номер 482 по производительности веб-сайта: иногда вам придется выбросить всю свою работу в мусор, чтобы ваш сайт оставался быстрым.

Но есть надежда.

Стилизованные компоненты версии 2 были быстрее, чем версия 1. Версия 3 была еще быстрее. Версия 4 еще быстрее. Может быть, в один прекрасный день компоненты станут такими же быстрыми, как vanilla CSS, и в этот день я буду доволен.

А для тех из вас, кто не похож на меня, возможно, производительность не такая уж большая проблема. Если ваш веб-сайт грузится 5 секунд, то увеличение до 5.1 — это не конец света. Или, может быть, вы кодируете информационный портал для Церкви Саентологии; вряд ли ваши пользователи скажут: «О, Боже мой, этот сайт такой медленный, я перехожу к христианам».

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

Подводя итоги, мне нравятся стилизованные компоненты, но мои пользователи, вероятно, этого не разделят. Это конец части статьи, которая связана с заголовком статьи.

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

Я называю это «панель разброса», и идея заключается в том, что она помогает вашему мозгу правильно понять то, что говорят данные, не вводя искусственную информацию, такую как средние значения.

(Я совершенно уверен, что я не первый, кто сделал это, но не смог найти подобного нигде. Может быть, кто-то просветит меня в комментариях.)

Чтобы показать, почему это важно, ниже приводятся два набора данных, где разница в средних значениях составляет 9%.
Справедливости ради, стоит отметить, что из данных первой диаграммы мы не можем сделать никакого вывода.

Диаграмма средних значений, демонстрирующая 9%-ное увеличение для «набора 2»

Изменения для «набора 1» по сравнению с «набором 2» не оказывают существенного влияния. Но посмотрите этот второй пример:

Диаграмма средних значений, демонстрирующая 9%-ное увеличение для «набора 2»

Мы можем с уверенностью сказать, что все, что было изменено в «наборе 2», оказало существенное влияние. Но если бы мы использовали диаграммы, показывающие средние значения, эти две диаграммы были бы идентичны.

Еще одна вещь: линии слегка размыты, поэтому, если у вас есть сотни значений, информация не теряется, когда две точки данных имеют одинаковое значение:

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

(Даже выполнение причудливых маневров, таких как показ доверенных интервалов с ошибками, все равно уменьшает информативность исходных данных, заменяя их совокупностью, а затем накладывая некоторые дополнительные вещи).

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

(Профессиональный совет: вы можете вставить диапазон ячеек Excel в поле ввода, если у вас уже есть некоторые данные.)

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

Автор: David Gilbertson

Источник: https://medium.com/

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