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

Является.

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

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

Итого:
Каждому инструменту своё место. Нужно что-то быстро набросать, будь то прототип, mvp или небольшой лэндинг или Вы бэкенд разработчик которого заставили верстать - допустимо.
В остальных случаях - сомнительно.
Ответ написан
@Allen8Kane
Full-stack developer
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, код у всех разрабов теперь выглядит одинаково, очень многое есть уже из коробки например размеры экрана, цветовые палитры, адаптивные единицы измерения и т.д и все это очень хорошо взаимодействует друг с другом, + есть крутая документация

Кстати на официальном сайте на этот вопрос уже отвечали6202c7bb8e770640929781.jpeg
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы