TailwindCSS — не вредит ли такое количество тегов в HTML оптимизации сайта?

Question

[deOnore]

При использовании Tailwind получаем огромное количество повторяющихся классов в коде.
Код каждой страницы в отличии от CSS (который кешируется) грузиться заново.

Не является ли это минусом? Или этим пренебрегают в угоду быстрой верстки?

Вариант использовать описания, например, компонента карточки, указав 1-2 класса.

<div class="card">
<h3>Card Title</h3>
..
</div>

// style.css
.card {...}
.card h3 {...}

Ниже пример с оф. сайта.

<div class="grid grid-cols-1 sm:grid-cols-2 sm:px-8 sm:py-12 sm:gap-x-8 md:py-16">
  <div class="relative z-10 col-start-1 row-start-1 px-4 pt-40 pb-3 bg-gradient-to-t from-black sm:bg-none">
    <p class="text-sm font-medium text-white sm:mb-1 sm:text-gray-500">Entire house</p>
    <h2 class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl">Beach House in Collingwood</h2>
  </div>
... 
и так каждая карточка

Answer 1

[Вадим]

Не является ли это минусом?

Является.

Минусы:
• Ухудшается читаемость
• Увеличивается вес HTML, однако нормальные браузеры\сервера общаются контентом в сжатом виде. Например сжатие с помощью gzip. Сжатие на выходе получается не плохое, поэтому с точки зрения трафика - не хорошо, но не смертельно.
• С точки зрения DOM - конечно 1000 утилитарных классов на одном элементе это тоже не будет хорошо влиять на скорость отрисовки, построение CSSOM и так далее. Но браузеры делают это достаточно быстро. Разница с традиционным подходом на глаз может быть будет заметна только на медленных устройствах.
• Часто такие css решения добавляют !Important в код, а это усложняет переопределние и тд, но у tailwind вроде всё ок с этим.
• Если нужно будет поменять оформление какого-то блока, то Вам нужно будет пойти в разметку, а не в стили. А если Вы мешаете подходы, когда у Вас и атомарный и традиционный, то может сложится ситуация, когда нужно будет пойти и в разметку и в css.
• Куча мусора в инструментах разработчика при отладке.

Плюсы:
• Лёгкое и быстрое прототипирование

Итого:
Каждому инструменту своё место. Нужно что-то быстро набросать, будь то прототип, mvp или небольшой лэндинг или Вы бэкенд разработчик которого заставили верстать - допустимо.
В остальных случаях - сомнительно.

Comments

[Flying]

Ещё более сложные селекторы идут лесом при таком подходе либо же получается, что часть стилей в CSS, а часть - в HTML, да ещё и неявно.

[Вадим]

Flying, Всё верно. Забыл упомянуть это.

[deOnore]

Вадим, а что Вы используете?

[Вадим]

deOnore, из подобных решений - ничего. Свое наименование по БЭМ

Answer 2

[Allen Kane]

TailwindCSS — не вредит ли такое количество тегов в HTML оптимизации сайта?
Нет не вредит если использовать правильно.
Крч когда мы по старинке верстаем сайт алгоритм такой:
1. Создать пять дивов(условно)
2. Всем дивам указать один класс, например .card
3. Прописать стили для класса .card
За счёт этого подхода мы пишем стили один раз а использовать можем везде

Теперь что касается алгоритма для tailwind:
1. Создаем компонент(в реакте или vue, условно components/card.vue)
2. Создаем один div
3. Через tailwind классы стилизуем элемент
4. На странице (для примера pages/index.html) вызываем компонент, и через цикл(v-for или map) генерируем 5 копий нашего компонента(ну или сколько нужно)
По сути мы добились того же, что и в первом случае, создав один раз компонент, мы можем переиспользовать его сколько угодно раз.
Tailwind как раз интересен тем что заставляет тебя разбивать все на компоненты

Насчёт performance ничего конкретно сказать не могу, но по сути даже если бы tailwind был бы плохо оптимизирован, css не самая тяжёлая част бандла, да и то что никто из западных разрабов не жаловался на performance говорит о том что такой проблемы скорее всего нет

Вадим
Каждому инструменту своё место. Нужно что-то быстро набросать, будь то прототип, mvp или небольшой лэндинг или Вы бэкенд разработчик которого заставили верстать - допустимо.
В остальных случаях - сомнительно.
нет,нет и еще раз нет, tailwind не bootstrap у него нет готовых элементов, tailwind это по сути чуть более удобный css, у технологии нет никаких ограничений, так что верстать можно как mvp так и enterprise

Итог:
Мне tailwind нравится по трем причинам
1. Сразу в теге описаны стили, за счёт чего легче понять что за стили используются
2. Короткий синтаксис margin-left: 3rem; это ml-3 padding: 0 3rem 0 3rem; это px-3 и т.д
3. И наверное самое главное, tailwind css это фреймворк, и это решает кучу проблем, мне теперь не нужно изучать БЭМ, я теперь не выбираю между rem em и px, код у всех разрабов теперь выглядит одинаково, очень многое есть уже из коробки например размеры экрана, цветовые палитры, адаптивные единицы измерения и т.д и все это очень хорошо взаимодействует друг с другом, + есть крутая документация

Кстати на официальном сайте на этот вопрос уже отвечали

Comments

[Вадим]

Причём тут бутстрап и готовые элементы? Если вы что-то (при|до)думали и/или считаете иначе, не значит что а) это опровергает чье-то мнение б) так оно и есть. Это что касалось той части, к которой Вы меня притянули.

А по тексту, автор не спрашивал про фрэймворки, но раз уж Вы заговорили о них, то.. компоненты преобразуется в рендер функции - чистый javascript. чем больше разметка тем хуже производительность(пруфов под рукой нет. Инфа от озона, на примере vue 2) и тем получается больше js'а, а js - самый тяжёлый ресурс, так как его не просто нужно загрузить, так ещё и распарсить. На хабре есть статья. Сейчас правда появился apply, у тайлвинда когда классы склеиваются в один, который не знаю как работает с фрэймворками, тут ничего не могу сказать. В итоге в чем ваша "правильность" - не ясно.
Ну а третью часть вашего ответа комментировать не буду, так как 100% субъективщины и вкусовщины.