@deOnore

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

Здравствуйте.

При использовании 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>
... 
и так каждая карточка
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ответы на вопрос 1
MrDecoy
@MrDecoy
Верставший фронтендер
Не является ли это минусом?

Является.

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
07 мар. 2021, в 03:18
1500 руб./за проект
06 мар. 2021, в 22:58
70000 руб./за проект
06 мар. 2021, в 22:36
10000 руб./за проект