Как Tailwind стал популярным CSS-фреймворком
Недавно я использовал Bootstrap 5, и это был кошмар по сравнению с Tailwind
Недавно я начал создавать небольшие туториалы для разработчиков. Цель состояла в том, чтобы показать младшим разработчикам, как старший разработчик думает, когда пишет код. Например, как старший разработчик может понять документацию или новый фреймворк, о котором он не знает, и как он может узнать, когда что-то идет не так. Знаменитый «код пахнет.»
Примеры проектов я нашел на Frontend Mentors и закодировал их с помощью различных технологий. Например, первым проектом была интеграция компонента карточки товара. Я решил закодировать решение с помощью простого CSS (другими словами, без фреймворка), но с помощью Tailwind и Bootstrap.
Это было интересно не только зрителям, но и мне. Я хотел посмотреть, как развивались Tailwind и Bootstrap за последние несколько лет. Честно говоря, я знал, что опыт разработки с Tailwind будет отличным, но я не знал, что работа с Bootstrap 5 будет такой мучительной. Это было настолько ужасно, что побудило меня написать эту статью.
В этой статье вы найдете историю (в основном о Bootstrap), мысли (о моем опыте разработки) и фрагменты кода! Начнем с исторических фактов!
Время, когда все использовали Bootstrap
Несколько лет назад Bootstrap был повсюду. В 2016 году вы не могли открыть веб-сайт, который не работал с Bootstrap. CSS Flexbox уже был там, но CSS Grid не был широко известен и хорошо поддерживался. Я помню, как разговаривал с разработчиком о CSS Grid в середине 2016 года и рассказал ему о возможностях Grid. Его ответ был шокирующим: он думал, что я говорю об элементе таблицы HTML, и он ничего не знал о CSS Grid. В то время все полагались на Bootstrap 3, и люди все еще использовали jQuery.
Помимо Bootstrap, были и другие CSS-фреймворки. Вторым по известности был Основы. Помимо шаблонов писем, я не использовал много Foundations. Может быть, он был лучше или хуже, отличался или был таким же, как Bootstrap. Правда в том, что я не знаю.
Они утверждали (и, судя по их страницам GitHub, таковыми и остаются) быть самой продвинутой адаптивной внешней средой в мире. Глядя на официальную документацию и их репозиторий на GitHub, мне кажется, что он мертв. Я не хочу тратить слишком много времени на историю, но я просто хочу добавить пару вещей, прежде чем двигаться дальше.
Во-первых, Bootstrap был разработан инженерами Twitter, и они проделали большую работу. Twitter по-прежнему работает с Bootstrap, как и многие веб-сайты. В большинстве случаев вы можете легко сказать, работает ли веб-сайт с Bootstrap или нет, даже если вы не опытный разработчик. С моей точки зрения, это не всегда звучит как хорошая новость! Потому что при его использовании веб-сайты выглядят одинаково.
Это может быть преимуществом для некоторых веб-сайтов, поскольку пользователям не нужно заново изучать шаблоны и способы навигации по веб-сайту. Например, они знают, как выглядит ссылка или кнопка отправки. Но в какой-то момент ваш сайт теряет свою идентичность, и полагаться на него становится слабостью. Вторая сила заключается в том, что основная команда решила удалить jQuery с Bootstrap 5. Я не знаю, было ли это хорошим или плохим решением. Сегодня jQuery менее популярен, чем другие интерфейсные фреймворки, и все меньше и меньше используется разработчиками, так что в некотором смысле это имеет смысл.
Однако его удаление увеличило объем работы, с которой приходилось иметь дело основной команде, и они потеряли совместимость со старыми браузерами. Если вы хотите узнать больше об этом, вот отличная статья для изучения этой темы.
Третья часть — это записка «спасибо». С Bootstrap, особенно с Bootstrap 4, основная команда проделала выдающуюся работу с веб-доступностью. Они представили множество концепций, связанных с атрибутами aria, и предоставили конкретные примеры и образцы кода, которые люди могут использовать. С моей точки зрения, Bootstrap 4 был великолепен! К сожалению, Bootstrap 5 — нет.
Tailwind: как мы заново изобрели способ кодирования CSS
Как и многие люди, я открыл для себя термин Утилиты прежде всего CSS в Tailwind. До этого я пытался полагаться на БЭМ. Не знаю, как вы, а я всегда терялся в БЭМ. Я понимаю концепции модификаторов, но иногда у меня возникают проблемы, когда мне нужно использовать либо блок, либо элемент. Если вы не знакомы с БЭМ, я предлагаю вам посмотреть этот ресурс. Подводя итог, БЭМ — это способ структурировать ваш код CSS.
На бумаге такое структурирование CSS кажется разумной идеей. Однако это имеет тенденцию загрязнять читабельность вашего HTML и нарушать ответственность. Вот отличный ресурс об этих концепциях.
Вернемся к Tailwind. Почему Tailwind сделал отличный шаг при разработке CSS-фреймворка «Utility-first»? Если вы уже читали последний ресурс, которым я поделился, вы уже должны знать ответ. Вместо того, чтобы полагаться на компоненты, такие как Bootstrap, которые одновременно применяют множество стилей, вы добавляете классы, которые выполняют только одну функцию. Другими словами, вы пишете классы, из которых можно составить любой дизайн: один класс для отступов, другой для размера шрифта и т. д.
Возьмем пример.
Вот как вы пишете компонент карты с помощью Bootstrap:
И вот результат:
Вот как вы пишете карточный компонент с помощью Tailwind:
И вот результат:
Хорошо, две карты не похожи друг на друга, но я хочу, чтобы вы взглянули на код. В Bootstrap компоненты карты могут различаться по размеру и цвету, но в итоге они выглядят более или менее одинаково. Помните, что я сказал вам в начале этой статьи? Вы можете легко определить, когда веб-сайт использует Bootstrap.
Однако с помощью Tailwind вы можете добавить свои собственные стили практически ко всему. Почему это так важно, спросите вы? Во-первых, потому что он позволяет вам оформить веб-сайт так, как вы хотите, это здорово, особенно для дизайнеров! Во-вторых, потому что, как разработчик, это помогает вам быть как можно ближе к вашим макетам, и делает это без нарушения какой-либо ответственности между вашей HTML-разметкой и вашим CSS.
С Tailwind вам больше не нужно полагаться на БЭМ. Для меня это очень хорошая новость!
Опыт разработчиков и документация
Попутный ветер: простота настройки и простота использования
Это был один из моих первых разов с Tailwind. Я имею в виду, что я знал проект раньше и уже читал документацию, но у меня не было возможности использовать его по-настоящему. Для этого проекта я решил не использовать CLI или PostCSS.
Вместо этого я решил поиграться с Tailwind с CDN. Когда я читал документацию, я знал, что это не лучший вариант для рабочих веб-сайтов, но для игровых целей это было нормально. Но даже с CDN я был поражен, увидев, насколько просто настроить Tailwind, просто добавив собственные цвета и шрифты.
Для сравнения, API утилит Bootstrap — беспорядок. Ни документацию, ни примеры кода не так просто подобрать, особенно если вы не знаете версию 5.
Вот как я настраиваю Tailwind в своем проекте:
В приведенном выше примере кода я добавил новые цвета и новые семейства шрифтов внутри литерала объекта tailwind.config .
И вот как я использую это в своем коде:
Посмотрите, это просто! Мне не нужно писать собственный код CSS или Sass. Мне просто нужно вызвать правильные классы, чтобы иметь возможность использовать его. Это очень, очень просто и в то же время мощно!
Tailwind: какая замечательная документация!
Это подводит нас ко второму аспекту силы Tailwind: его документации. Я разработчик (и я думаю, что вы тоже). В большинстве случаев, когда мы торопимся с проектом, у нас нет времени читать всю документацию. Нам нужны простые, но конкретные примеры, которые мы можем использовать и использовать повторно.
Мы хотим убедиться, что это правильный инструмент, и мы хотим увидеть это довольно быстро. В течение последних нескольких лет меня все больше интересовал опыт разработчиков, сокращенно DX. Вот определение, которое я нашел в Интернете:
Опыт разработчика — это каждое взаимодействие, связанное с вашим API или инструментом разработки. —
источник: https://everydeveloper.com/developer-experience/
Думая о взаимодействиях, думайте не только о комментариях к коду, удачных именах переменных или следовании соглашениям.
Подумайте также о документации и о том, как легко работать с библиотекой или фреймворком.
Например, я считаю, что опыт разработчиков с Symfony и Angular отличный. Они предоставляют учебник, отличную документацию и примеры кода. Но есть и нечто большее! Когда вы начинаете их использовать, вы также изучаете другие концепции. Например, документация Symfony объясняет концепции Entity и Repository Pattern. Angular учит промисы и наблюдаемые.
Напротив, документация React не очень хороша. Долго не объясняли, как писать эффективные тесты. Даже с крючками я не думаю, что они дают достаточно информации. В большинстве случаев, когда я разговариваю с разработчиками о React Hooks, они не понимают, как они работают. Короче говоря, DX важен. Важнее, чем вы себе представляете. Это может сделать проект успешным, а может привести к провалу. С Tailwind я мог закончить проект всего за полдня. Документацию легко читать и использовать, как и фреймворк. Итак, что насчет Bootstrap 5?
Bootstrap: смесь компонентов и утилит
Когда я писал эту статью, я не был уверен, хочу ли я сначала говорить об API утилит или о сочетании компонентов и утилит.
Сделав шаг назад, я думаю, что эти две проблемы связаны, но лучше начинать с компонентов и утилит.
С самого начала Bootstrap был посвящен компонентам. Есть компоненты для форм, каруселей (хотя вы не должны использовать карусели), панировочных сухарей, модальных окон и т. д. Это (или было?) самая сильная сторона Bootstrap.
А если я хочу титул? Я загляну на страницу Типографика в разделе Контент и найду информацию о классах heading, display и lead.
Большой! А как насчет Текстовой страницы в разделе Утилиты, особенно подраздела Размеры шрифтов? О, это еще один способ изменить размер шрифта. Но какие из них я должен использовать? Могу ли я совместить их оба? Что фреймворк хочет от меня? Именно такие вопросы я задаю себе, когда кодирую.
У меня сложилось впечатление, что Bootstrap сейчас между двумя стульями, и они не знают, на какой из них сесть. С одной стороны, они хотят, чтобы вы придерживались Bootstrap и его библиотеки компонентов.
Именно здесь основная команда вложила столько времени и усилий. С другой стороны, они представили утилиты и их API. Но опять же, в документации не так много примеров.
API утилит Bootstrap: потребовалось некоторое время, чтобы понять это
Несколько дней назад я кодировал решение Bootstrap для задачи компонента продукта и создавал новые классы, которые не использовали утилиты Bootstrap.
Я хотел добавить элементу ширину 90%. Я просмотрел документацию и нашел Страницу размеров в разделе Утилиты. Ширина по умолчанию: 25, 50, 75 и 100%. Сначала я создал обычай, который назвал w-90, что соответствует 90%, но я знал, что что-то идет не так.
Опять пахнет знаменитым кодом! Я посмотрел Страницу Utility API, прочитал ее быстро (как это делают мои разработчики) и подумал, что понял. Мне пришлось установить Sass и Bootstrap в моем проекте, чтобы использовать этот API с npm.
Справедливо! Я установил их. Затем я зашел на страницу Sass внутри разделов Customize, и тут у меня был выбор: либо импортировать все и не иметь возможности модифицировать утилиты, либо импортировать все вручную.
Затем я модифицировал утилиты (я покажу вам, как это сделать ниже) и скомпилировал свой Sass в CSS. На первый взгляд казалось, что это сработало, но я быстро обнаружил, что мои кнопки больше не имеют стиля. Почему ты спрашиваешь? Потому что я забыл импортировать некоторые части Bootstrap. Посмотрите на строки с 19 по 26.
В нем говорится: «При необходимости включите любые другие части по мере необходимости», но я начинаю с Bootstrap 5. Я не знаю, какие части нужны, а какие нет. Помните, что я говорил вам о DX? Для меня это плохой DX! Потому что даже при копировании и вставке у вас нет работающего примера. Это раздражает и не производит хорошего впечатления.
Вот что я бы добавил, чтобы заставить его работать:
Я добавил все части, даже те, которые мне не нужны (пока!), затем я поставил коммит, чтобы дать себе (будущему себе) знать, что они мне не нужны.
Хотел бы я иметь конкретный пример. Затем я, наконец, смог добавить новые утилиты. Да, немного утомительно. В двух последних разделах ниже вы найдете примеры того, как импортировать и использовать пользовательский шрифт с Bootstrap и Tailwind, а также как добавить новую ширину. Я думаю, некоторые люди будут рады конкретным примерам!
Как импортировать пользовательский шрифт
С попутным ветром
Во-первых, импортируйте свои шрифты. Я использую шрифты Google.
Затем импортируйте Tailwind с CDN и обновите объект конфигурации tailwind. Я добавляю резервные шрифты, а также добавляю новые цвета.
Наконец, используйте его!
Легко, верно?
С бутстрапом
Установите Sass с помощью Npm:
Добавьте Bootstrap через Sass и импортируйте все части бутстрапа.
Тогда вы сможете удалить ненужные части.
Между строками 9 и 10 я определил свои переменные Sass. Я обновляю утилиты семейства шрифтов между строками 102 и 113.
Затем я использую его внутри своего HTML-файла, как показано ниже:
Как добавить свойство межбуквенного интервала
С попутным ветром
Импортируйте Tailwind с помощью этого кода:
Используйте пользовательский класс попутного ветра. Посмотрите на tracking-[.5em] .
Ага, это легко!
С бутстрапом
То же, что и выше. Я устанавливаю Bootstrap и Sass через Npm.
Затем я обновляю свои утилиты, добавляя новую. Посмотрите на строку 34. Я создаю новую утилиту; он использует класс lt и имеет три значения.
Наконец, я использую его:
Фу, это была длинная статья! Дольше, чем я ожидал, когда начал писать. Я просто хочу рассказать вам кое-что о Bootstrap, прежде чем покинуть вас. Bootstrap 5 не очень хорош. Bootstrap 3 и 4 были лучше. Особенно с точки зрения документации и опыта разработчиков.
У меня сложилось впечатление, что Bootstrap снижается. Он еще не умирает, но кажется, что основная команда потеряла свое видение и не знает, куда они идут. Возможно, я ошибаюсь, но Bootstrap был создан до появления React и полноценных SPA-зон.
Он имел тенденцию и до сих пор хорошо работает с фреймворками с полным стеком, но не с React. Или по крайней мере с моей точки зрения. Мы не знаем. Возможно, через несколько лет мы вернемся к нему, но сегодня мне сложно рекомендовать Bootstrap младшим или старшим разработчикам.
Вот полный код задачи с Bootstrap и Tailwind: https://github.com/brocode-tuts/product-preview-card-component
