Вы можете создать практически любой веб-сайт с помощью div и Tailwind. Таблицы, промежутки, абзацы и заголовки — это просто дополнительные сложности. div и Tailwind — лучшие, потому что они позволяют быстро создавать черновики, div почти не предлагает функциональности по умолчанию, а Tailwind превращает CSS в забавную часть.

Быстрое составление

Когда все используемые вами компоненты одинаковы, вы можете собрать веб-страницу за считанные минуты. Да, вам нужно будет вернуться и добавить стили и форматирование, но вам все равно нужно это сделать. Моя стратегия заключается в том, чтобы изначально размещать всю страницу только с элементами div и без классов. Затем я возвращаюсь к началу и добавляю классы попутного ветра. В течение 5–20 минут, в зависимости от сложности веб-страницы, у меня есть готовая веб-страница. Я могу поиграть с форматированием, чтобы оно выглядело идеально, а затем разбить код на компоненты React.

div почти не имеет функциональности по умолчанию

Вы можете подумать, что это плохо, но на самом деле это делает его более гибким. Вы не ограничены тем, что, по мнению инженеров HTML-программ, вы хотели. Представьте, что вы пытаетесь использовать h1, но хотите удалить интервал вокруг него? Вам нужно будет установить маржу на 0 вручную. Хотите сделать то же самое с div? Просто добавьте попутный ветер css text-2xl и все готово. Что делать, если вы хотите сделать действительно крутую пользовательскую кнопку? div идеальны, потому что вам нужно беспокоиться только о функциях, которые вы хотите добавить, а не о тех, которые вам нужно удалить. Это так же просто, как несколько классов попутного ветра и обратный вызов по клику. Хотите расположить компоненты горизонтально и не хотите использовать разные классы CSS для каждого элемента? flex плюс вариант justify-content упрощает задачу.

Попутный ветер делает CSS веселым

Я знаю, что это непопулярное мнение, но Tailwind — моя любимая библиотека CSS. Он создает абсурдно длинные имена классов, и я понимаю, что временами это может раздражать. Однако, как только вы привыкнете читать имена классов, вы сможете добавлять стили или отлаживать свои страницы намного быстрее. За именами классов ничего не скрыто, они делают именно то, что говорят. Хотите понять, почему над заголовком слишком много места, найдите m или p . Это должно быть там. Это особенно верно, когда вы используете элементы div, которые не имеют предварительно прикрепленного CSS. С тех пор, как я перешел на Tailwind, мне не пришлось копаться в слоях классов в браузере, чтобы понять, почему мой текст зеленый, а не синий, потому что я могу напрямую искать text-green.

Да, есть допустимые варианты использования других компонентов HTML. Таблицы спасают жизнь при отображении больших объемов данных. header, footer и main должны обертывать соответствующие разделы вашего кода. И вам, очевидно, нужен img, если вы хотите показать какие-либо изображения. Однако при всех других сложностях макета div и Tailwind позволяют быстро и гибко создавать сложные современные веб-страницы. Ваш код делает именно то, что, по вашему мнению, он должен делать, его можно быстро начертить, а CSS больше не является рутиной. Следующим шагом является добавление библиотеки пользовательского интерфейса Javascript в микс, например React или Svelte. Они выводят ваше развитие на новый уровень.