Pull to refresh

Comments 7

Добрый день. Простите, а можете показать как выглядят страницы для которых css файл весит 3 мегабайта. И с 2000 уникальных для стилизации элементов.

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

Array.from(document.querySelectorAll('[class]'))
  .reduce((a, o) => {
    a.add(Array.from(o.classList.values()).sort().join(' '))
    return a
  }, new Set()).size

Еще я обнаружил ошибку в расчетах. Я не учел, что CSS пишется для уникальных элементов, которых гораздо меньше чем всех. И результаты противоположны полученным мной, чистый CSS + BEM оказался экономичнее даже без обфускации и оптимизации. Я исправлю тогда статью.

В целом tw скорее utility only, а не utility firts. сложность макета должна где-то существовать, это стоит учитывать при дальнейшей поддержке или переиспользовании макета. Либо во всяких sass, либо четко ограниченная дизайн системой с переиспользуемыми стилями.

Если в целом не нравится много перечислений, есть apply… это всеравно как постояннно народ пихает svg одинаковые на странице разными экземплярами, когда можно реюзнуть через символы вставив иконку полностью только один раз.

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

Я сжал gzip-ом большой CSS одного реального проекта с 2929KB до 75KB (сжатие в 40 раз), проект был на BEM.
Для эксперимента я сжал CSS страницы GitHub в 794KB до 111KB (сжатие в 7 раз), он на половину на Tailwind.

Sign up to leave a comment.

Articles