24.09.2021
da1d0a5e29b0bd7536e675ecfdf515e2

6 причин использовать Tailwind вместо традиционного CSS

6 обстоятельств использовать Tailwind вместо традиционного CSS

От создателя: в статье вы найдете 6 причин того, почему Tailwind лучше обычного CSS и стоит ли его использовать в проектах.

1. Незначительный размер пакета = невероятная производительность

В режиме разработки размер вывода Tailwind достаточно велик. Это сделано намеренно: на этом шаге создается каждый возможный класс, поэтому вам не необходимо ждать завершения процесса сборки, когда вы желаете что-то использовать.

Однако, как только Tailwind CSS перенесен в создание, он, с помощью инструмента PurgeCSS, удалит все классы, которые не употребляются. Он работает путем поиска в файлах вашего проекта имен классов, сохраняя только те, которые употребляются. В файле tailwind.config.js вы сможете настроить массив путей поиска purge.

JavaScript

Довольно легко получить очень маленький размер пакета CSS, без излишних усилий, что действительно помогает повысить вашу производительность. Вам будет достаточно сложно получить размер пакета более 10 КБ, потому веб-сайты, использующие Tailwind, как правило, загружаются очень стремительно, не нуждаясь в большой оптимизации, при условии, что остальная часть веб-сайта также оптимизирована.

Все, что вам необходимо сделать, это убедиться, что вы ссылаетесь на классы по их полному имени, а не методом создания имен с помощью JavaScript.

Не считая того, хотя на более быстрых машинах это в основном остается незамеченным, простота классов Tailwind, которые построены без использования сложных селекторов, значит, что ваш браузер работает немного резвее при синтаксическом анализе и рендеринге CSS. Это помогает повысить производительность на более неспешных компьютерах и старых телефонах. Как человек, чей телефон работает медлительно, поскольку я купил его 6 лет обратно, я воспользуюсь любым улучшением, которое смогу получить.

2. Резвое создание прототипа и сборки

С обыденным SCSS вам нужно писать собственные классы для каждого отдельного элемента на вашей страничке. Хотя он может предложить более узкий контроль, написание пользовательских классов занимает солидное количество времени: вам нужно добавить класс в HTML, потом создать его в CSS, а потом записать каждое свойство в длинном формате. Потом вам нужно подождать, пока CSS соберется, до этого чем вы сможете увидеть результат, плюс — если вам необходимо внести больше изменений, вам нужно будет каждый раз делать сборку проекта, что может занять ценное время и оборвать вашу работу.

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

Я понимаю, что исследование сокращений может занять некоторое время. Есть отличные инструменты, чтобы помочь вам с этим, в основном это официальная документация либо @nerdcave Tailwind шпаргалка. Но, честно говоря, проведя с ними неделю либо около того, вы запомните большинство принципиальных вещей. Есть пара специфических моментов, таких как отсутствие классов для flex-basis, но тому всегда есть весомая причина: в этом случае вы сможете просто использовать вместо них атрибуты ширины, к примеру, w-1/2. Это займет у вас мало времени, но поможет сэкономить намного больше.

Я использовал Tailwind на неких сайтах, у которых были очень сжатые сроки, и должен сказать, что это точно сняло большое напряжение, когда дело дошло до стилизации интерфейса. Если у вас сжатые сроки, Tailwind может незначительно облегчить жизнь.

3. Tailwind автоматом обрабатывает переменные CSS

Tailwind делает файл с именем tailwind.config.js. Этот файл содержит все опции для вашей темы, включая цвета, ширину, интервал (употребляется для заполнения, полей и аналогичных параметров), шрифты и так далее. Весь пакет CSS и все применяемые вами классы будут описаны в этом файле.

Каждому свойству может быть присвоено имя, по которому вы сможете ссылаться на связанные классы. Например:

JavaScript

Вы сможете изменить эти свойства в любое время, имена останутся прежними, если вы их не измените. Таким образом, Tailwind будет обрабатывать все ваши переменные CSS — он оказывает влияние на весь внешний вид сайта. Если изменяется цвет бренда или вам нужно всюду изменить шрифты, вы можете это сделать в tailwind.config.js.

4. Избавляет утечку области видимости

Одна из черт, которая нравится людям в BEM и почему он так популярен сейчас, заключается в том, что система именования классов сотворена для представления структуры компонента. Упрощая чтение и осознание, разработчики также извлекают выгоду из побочного эффекта таковой структуры: поскольку макет прост для осознания, вы можете писать классы без использования селекторов CSS.

CSS

Неувязка с селекторами CSS заключается в том, что они усложняют CSS, когда составляющие становятся очень зависимыми от конкретной структуры HTML. Так как общие классы CSS, такие как .container имеют возможность много повторяться, использование их имен может привести к перекрытию, когда изменение 1-го класса повлияет на многие другие. Это одна из главных причин, по которой мы используем BEM , поэтому что он проясняет структуру и сводит каждый класс к области верхнего уровня, потому компоненты не зависят ни от чего другого. Работа без схожей методологии CSS может вызвать головную боль, а сохранение ее как можно более обычной означает, что большему количеству людей будет легче ее осознать.

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

CSS

Что мне вправду нравится, так это то, что нет необходимости в расплывчатых, очень конкретных или обычно одноразовых именах классов. Вам не необходимо называть каждый стиль текста, каждую форму CSS либо расцветку. Опять же, вы по-прежнему сможете комментировать HTML, если нужно, но нет необходимости именовать каждый класс, который имеет display:flex.

Что, если вам все еще необходимо использовать селекторы?

Конечно, бывают случаи, когда селекторы имеют возможность быть лучшим вариантом, например, для стилизации блоков WYSIWYG, но в целом отказ от селекторов может посодействовать сохранить легкую для чтения и осознания кодовую базу. Помните, что вы все равно сможете использовать SCSS вместе с Tailwind. Если вам все-же нужно использовать селекторы, префиксы могут посодействовать отслеживать, какой пользовательский CSS, а какой нет. Мне нравится использовать этот способ для WYSIWYG:

CSS

5. SCSS все еще существует, если он вам нужен

Следует иметь в виду, что вам не необходимо использовать Tailwind CSS вместо SCSS. Как и раньше будут случаи, когда вам нужно сделать элемент, который использует элементы :before и :after, либо когда вам понадобится анимация по главным кадрам. Когда это произойдет, вы сможете просто использовать SCSS или любой другой препроцессор точно так же, как вы это делали ранее — нет необходимости делать выбор меж Tailwind CSS и SCSS.

Я предпочитаю использовать Tailwind для всей тяжеленной работы, а для элементов, которым требуются функции CSS, я могу переключиться на SCSS. Это позволяет мне работать намного резвее, сохраняя при этом высокий уровень свойства, настройки и детализации.

Простота использования сокращенных классов заместо длинных описательных имен классов действительно помогает. Нельзя опровергать, что имена классов BEM или аналогичной методологии полезны — вы точно проинформированы о том, для чего предназначен класс. По последней мере, это теория. Проблема в том, что когда у каждого элемента должно быть уникальное имя класса, вы получаете расплывчатые, странноватые или совершенно глупые классы. Может быть тяжело привыкнуть к тому, что классы не описаны, но не плохое понимание синтаксиса похоже на чтение обыденного CSS, и вы всегда можете добавить комменты в свой HTML с описанием того, что представляет собой класс.

6. Отлично работает с фреймворками JavaScript

Следует учитывать, что Tailwind не будет «сухим» при использовании в среде, где вы будете копировать и вставлять HTML, потому не ожидайте, что все пойдет отлично, если вы работаете с простыми файлами HTML. Как только вы начнете копировать и воткнуть таким образом, у вас больше не будет центрального источника, где вы сможете изменить внешний вид компонентов, поскольку источник стиля вашего сайта больше не привязан к файлам CSS.

В современных фреймворках JavaScript способности Tailwind действительно могут проявить себя. Это связано с тем, что такие фреймворки, как Vue либо React, основаны на создании повторно применяемых компонентов, чтобы минимизировать объем HTML, который нужно написать. Эти компоненты являются строительными блоками вашего приложения и имеют возможность быть или простым контейнером или огромным компонентом, состоящим из более мелких.

Эти составляющие хранятся в собственных пользовательских файлах, которые объединяют HTML и JS, а во Vue у вас также есть возможность соединить CSS в один файл. Это значит, что ваши источники истины больше не необходимо разделять по типам файлов, они все имеют возможность существовать в одном файле, который обрабатывает один компонент. Это так именуемая разработка на основе компонентов, которую JavaScript-фреймворки принимают с распростертыми объятиями. Источники правды по-прежнему можно разделить на разные файлы, но если вы желаете внести изменения в некий компонент, вы перейдете прямо в папку этого компонента, а не в три отдельных места.

Вывод

Я буду первым, кто признает, что Tailwind CSS, возможно, не является правильным выбором в хоть какой ситуации. У него есть действительно фантастические функции, он резвый и компилируется до смешных размеров файлов, но просит совершенно другого мышления и набора инструментов, чтоб воспользоваться его функциями.

Я увидел, что многие команды, принимают Tailwind и подобные ему решения. Мы все еще находимся на исходной стадии этого подхода, и нам еще почти все предстоит выяснить, но потенциал огромен. Я с нетерпением жду способности увидеть, к чему это приведет в будущем.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *