От автора: в статье вы найдете шесть причин того, почему Tailwind лучше традиционного CSS и стоит ли его использовать в проектах.
1. Небольшой размер пакета = невероятная производительность
В режиме разработки размер вывода Tailwind довольно велик. Это сделано намеренно: на этом этапе создается каждый возможный класс, поэтому вам не нужно ждать завершения процесса сборки, когда вы хотите что-то использовать.
Однако, как только Tailwind CSS перенесен в производство, он, с помощью инструмента PurgeCSS, удалит все классы, которые не используются. Он работает путем поиска в файлах вашего проекта имен классов, сохраняя только те, которые используются. В файле tailwind.config.js вы можете настроить массив путей поиска purge.
// tailwind.config.js
module.exports = { purge: [ './src/components/**/**/*.jsx', './src/layout/**/**/*.jsx', './src/pages/**/**/*.jsx', ], theme: {}, variants: {}, plugins: [],
}Достаточно легко получить очень маленький размер пакета CSS, без лишних усилий, что действительно помогает повысить вашу производительность. Вам будет довольно сложно получить размер пакета более 10 КБ, поэтому веб-сайты, использующие Tailwind, как правило, загружаются очень быстро, не нуждаясь в большой оптимизации, при условии, что остальная часть сайта также оптимизирована.
Все, что вам нужно сделать, это убедиться, что вы ссылаетесь на классы по их полному имени, а не путем создания имен с помощью JavaScript.
// bad
<div className={ 'bg-' + props.isDark ? 'neutral-dark' : 'neutral-light' }> // good
<div className={ props.isDark ? 'bg-neutral-dark' : 'bg-neutral-light' }Кроме того, хотя на более быстрых машинах это в основном останется незамеченным, простота классов Tailwind, которые построены без использования сложных селекторов, означает, что ваш браузер работает немного быстрее при синтаксическом анализе и рендеринге CSS. Это помогает повысить производительность на более медленных компьютерах и старых телефонах. Как человек, чей телефон работает медленно, поскольку я купил его 6 лет назад, я воспользуюсь любым улучшением, которое смогу получить.
2. Быстрое создание прототипа и сборки
С обычным SCSS вам нужно писать собственные классы для каждого отдельного элемента на вашей странице. Хотя он может предложить более тонкий контроль, написание пользовательских классов занимает приличное количество времени: вам нужно добавить класс в HTML, затем создать его в CSS, а затем записать каждое свойство в длинном формате. Затем вам нужно подождать, пока CSS соберется, прежде чем вы сможете увидеть результат, плюс — если вам нужно внести больше изменений, вам нужно будет каждый раз делать сборку проекта, что может занять ценное время и прервать вашу работу.
Tailwind CSS исключает эти дополнительные действия и дает разработчикам простой и быстрый способ стилизации элементов. Вы видите элемент, который хотите стилизовать, добавляете необходимые ему свойства, используя сокращение, и изменения появляются очень быстро, не дожидаясь сборки CSS. Ваше внимание может оставаться на конкретной задаче, потому что вы не переключаетесь на разные файлы, и весь процесс кажется простым.
<div class="bg-white rounded p-4"> <h1 class="text-24 font-heading underline"> Foobar </h1> <p class="text-16 font-body> Hello world! </p> </div>
Я понимаю, что изучение сокращений может занять некоторое время. Есть хорошие инструменты, чтобы помочь вам с этим, в основном это официальная документация или @nerdcave Tailwind шпаргалка. Но, честно говоря, проведя с ними неделю или около того, вы запомните большинство важных вещей. Есть пара специфических моментов, таких как отсутствие классов для flex-basis, но тому всегда есть веская причина: в этом случае вы можете просто использовать вместо них атрибуты ширины, например, w-1/2. Это займет у вас немного времени, но поможет сэкономить намного больше.
Я использовал Tailwind на некоторых сайтах, у которых были очень сжатые сроки, и должен сказать, что это определенно сняло большое напряжение, когда дело дошло до стилизации интерфейса. Если у вас сжатые сроки, Tailwind может немного облегчить жизнь.
3. Tailwind автоматически обрабатывает переменные CSS
Tailwind создает файл с именем tailwind.config.js. Этот файл содержит все настройки для вашей темы, включая цвета, ширину, интервал (используется для заполнения, полей и аналогичных свойств), шрифты и так далее. Весь пакет CSS и все используемые вами классы будут описаны в этом файле.
Каждому свойству может быть присвоено имя, по которому вы можете ссылаться на связанные классы. Например:
// tailwind.config.js colors: { brand: { DEFAULT: '#f0000', // bg-brand primary: '#f0000', // bg-brand-primary secondary: '#f0000' // bg-brand-secondary
} // other ways to use these colours
.text-brand
.border-brand-secondaryВы можете изменить эти свойства в любое время, имена останутся прежними, если вы их не измените. Таким образом, Tailwind будет обрабатывать все ваши переменные CSS — он влияет на весь внешний вид сайта. Если меняется цвет бренда или вам нужно везде изменить шрифты, вы можете это сделать в tailwind.config.js.
4. Устраняет утечку области видимости
Одна из черт, которая нравится людям в BEM и почему он так популярен сегодня, заключается в том, что система именования классов создана для представления структуры компонента. Упрощая чтение и понимание, разработчики также извлекают выгоду из побочного эффекта такой структуры: поскольку макет прост для понимания, вы можете писать классы без использования селекторов CSS.
// this
.block { &__element { ... } &__element--modifier { ... }
} // not this
.block { & > .element { &.modifier { ... } }
}Проблема с селекторами CSS заключается в том, что они усложняют CSS, когда компоненты становятся очень зависимыми от конкретной структуры HTML. Поскольку общие классы CSS, такие как .container могут много повторяться, использование их имен может привести к перекрытию, когда изменение одного класса повлияет на многие другие. Это одна из основных причин, по которой мы используем BEM , потому что он проясняет структуру и сводит каждый класс к области верхнего уровня, поэтому компоненты не зависят ни от чего другого. Работа без подобной методологии CSS может вызвать головную боль, а сохранение ее как можно более простой означает, что большему количеству людей будет легче ее понять.
Принцип работы CSS заключается в принятии идеи: ни от чего не зависеть. В Tailwind классы являются единственными, обычно состоят из одного или двух свойств CSS, и они никогда не зависят друг от друга, за исключением преднамеренных исключений, таких как функция группового наведения. Вам даже не нужно думать об утечке области видимости, потому что, если вы сами не добавите эти селекторы с помощью пользовательского CSS, возможность вложения классов в сложные селекторы на самом деле не встроена.
// this is all tailwind classes are
.w-1/2 { width: 50%;
}
.mx-auto { margin-left: auto; margin-right: auto;
}// using hover groups <div class="group bg-white hover:bg-black"> <h3 class="text-grey group-hover:text-black group-hover:underline">Title</h3> <p class="text-grey group-hover:text-black" </div>
Что мне действительно нравится, так это то, что нет необходимости в расплывчатых, слишком конкретных или обычно одноразовых именах классов. Вам не нужно называть каждый стиль текста, каждую форму CSS или расцветку. Опять же, вы по-прежнему можете комментировать HTML, если нужно, но нет необходимости называть каждый класс, который имеет display:flex.
Что, если вам все еще нужно использовать селекторы?
Конечно, бывают случаи, когда селекторы могут быть лучшим вариантом, например, для стилизации блоков WYSIWYG, но в целом отказ от селекторов может помочь сохранить легкую для чтения и понимания кодовую базу. Помните, что вы все равно можете использовать SCSS вместе с Tailwind. Если вам все-таки нужно использовать селекторы, префиксы могут помочь отслеживать, какой пользовательский CSS, а какой нет. Мне нравится использовать этот метод для WYSIWYG:
// typography.scss .t-wysiwyg { & p { font-size: 12px; } & strong { @apply font-bold; }
} .t-wysiwyg--contact { ... }5. SCSS все еще существует, если он вам нужен
Следует иметь в виду, что вам не нужно использовать Tailwind CSS вместо SCSS. По-прежнему будут случаи, когда вам нужно создать элемент, который использует элементы :before и :after, или когда вам понадобится анимация по ключевым кадрам. Когда это произойдет, вы можете просто использовать SCSS или любой другой препроцессор точно так же, как вы это делали раньше — нет необходимости делать выбор между Tailwind CSS и SCSS.
Я предпочитаю использовать Tailwind для всей тяжелой работы, а для элементов, которым требуются функции CSS, я могу переключиться на SCSS. Это позволяет мне работать намного быстрее, сохраняя при этом высокий уровень качества, настройки и детализации.
Простота использования сокращенных классов вместо длинных описательных имен классов действительно помогает. Нельзя отрицать, что имена классов BEM или аналогичной методологии полезны — вы точно проинформированы о том, для чего предназначен класс. По крайней мере, это теория. Проблема в том, что когда у каждого элемента должно быть уникальное имя класса, вы получаете расплывчатые, странные или совершенно глупые классы. Может быть трудно привыкнуть к тому, что классы не описаны, но хорошее понимание синтаксиса похоже на чтение обычного CSS, и вы всегда можете добавить комментарии в свой HTML с описанием того, что представляет собой класс.
<-- Contact Section - 2 column, 1 column on mobile --> <div class="flex flex-row items-center"> <-- Map --> <div class="w-full tablet:w-1/2"> <img src="map.jpg" /> </div> <-- Content --> <div class="w-full tablet:w-1/2"> <h3></h3> <p></p> <ul></ul> </div> </div>
6. Отлично работает с фреймворками JavaScript
Следует учесть, что Tailwind не будет «сухим» при использовании в среде, где вы будете копировать и вставлять HTML, поэтому не ожидайте, что все пойдет хорошо, если вы работаете с простыми файлами HTML. Как только вы начнете копировать и вставить таким образом, у вас больше не будет центрального источника, где вы можете изменить внешний вид компонентов, поскольку источник стиля вашего веб-сайта больше не привязан к файлам CSS.
В современных фреймворках JavaScript возможности Tailwind действительно могут проявить себя. Это связано с тем, что такие фреймворки, как Vue или React, основаны на создании повторно используемых компонентов, чтобы минимизировать объем HTML, который необходимо написать. Эти компоненты являются строительными блоками вашего приложения и могут быть или простым контейнером или большим компонентом, состоящим из более мелких.
Эти компоненты хранятся в собственных пользовательских файлах, которые объединяют HTML и JS, а во Vue у вас также есть возможность объединить CSS в один файл. Это означает, что ваши источники истины больше не нужно разделять по типам файлов, они все могут существовать в одном файле, который обрабатывает один компонент. Это так называемая разработка на основе компонентов, которую JavaScript-фреймворки принимают с распростертыми объятиями. Источники истины по-прежнему можно разделить на разные файлы, но если вы хотите внести изменения в некий компонент, вы перейдете прямо в папку этого компонента, а не в три отдельных места.
Вывод
Я буду первым, кто признает, что Tailwind CSS, вероятно, не является правильным выбором в любой ситуации. У него есть действительно фантастические функции, он быстрый и компилируется до смешных размеров файлов, но требует совершенно другого мышления и набора инструментов, чтобы воспользоваться его функциями.
Я заметил, что многие команды, принимают Tailwind и подобные ему решения. Мы все еще находимся на начальной стадии этого подхода, и нам еще многое предстоит выяснить, но потенциал огромен. Я с нетерпением жду возможности увидеть, к чему это приведет в будущем.
Источник: npmrundev.wordpress.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен