Слои абстракции очень субъективны в зависимости от того, что, когда и как вы хотите. Этот пост основан на моем опыте работы с Tailwind CSS 3. Он также о том, что, когда и как.

В вычислениях уровень абстракции или уровень абстракции — это способ скрыть рабочие детали подсистемы.
— https://en.wikipedia.org/wiki/Abstraction_layer

Уровни абстракции должны быть более доступной версией подсистемы. Фреймворки и библиотеки можно назвать уровнями абстракции, потому что они скрывают то, как работает подсистема. Мне нравится быть осторожным, когда дело доходит до слоев абстракции. Слои абстракции, при выборе которых я имею право голоса. Дистрибутив Linux, такой как Ubuntu, является примером уровня абстракции. Это делает Linux полноценной операционной системой. Это уровень абстракции для Linux, который представляет собой просто ядро. Это делает вычисления удобными, функциональными и в некоторых случаях безопасными.

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

Что такого особенного в Tailwind CSS?

Tailwind CSS — это CSS-фреймворк, ориентированный на утилиты. Это означает, что вместо некоторых классов CSS, которые являются предварительно созданными компонентами, вам предоставляются служебные классы. Вспомогательные классы — это меньшие наборы классов CSS, которые можно использовать для создания компонентов. Это дает вам больше гибкости при проектировании элементов. Вспомогательные классы, такие как `flex` для display:flex;, p-2 для padding: 0.5rem;, являются лишь примерами служебных классов, предоставляемых Tailwind CSS. Tailwind CSS работает как дизайнерский API с выбранными служебными классами и предопределенными параметрами. Он также построен с учетом настройки, обеспечивая гибкость. Это лишь некоторые причины, по которым Tailwind CSS такой особенный.

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

Хорошие части

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

Уровень абстракции должен упростить понимание подсистемы

Предполагается, что уровень абстракции облегчает нам изучение и понимание подсистемы. Это не должно скрывать или мешать нам понять, как работает подсистема.

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

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

<! — With Tailwind CSS →
<div class=”grid grid-flow-row gap-1 p-1 lg:grid-flow-col”>
 <div>Div element 1</div>
 <div>Div element 2</div>
 <div>Div element 3</div>
 <div>Div element 4</div>
 <div>Div element 5</div>
</div>

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

/* With CSS */
.divClass {
 display: grid;
 grid-auto-flow: column;
 gap: 1rem;
 padding: 1rem;
}
@media (max-width: 1024px) {
 .divClass {
 display: grid;
 grid-auto-flow: row;
 padding: 1rem;
 gap: 1rem;
 }
}

Передача знаний после выбора уровня абстракции

Передача знаний должна быть идеальной, когда вы используете слой абстракции. Вам не нужно заново учиться всему с нуля. Чем больше знаний вы можете перенести при использовании слоя абстракции, тем лучше.

Вспомогательные классы в Tailwind CSS очень похожи на свойства CSS с небольшими отличиями. Это похоже на псевдонимы свойств CSS. И как только вы освоитесь, вы сможете угадать большинство из них. Вы также можете повторно использовать методы и решения, связанные с CSS, которые вы знаете из опыта и из таких мест, как StackOverflow. Как упоминалось ранее, с Tailwind CSS вы по-прежнему думаете в CSS. Вам просто нужно заново реализовать все это с помощью служебных классов. Это стало проще с помощью VSCode Tailwind CSS intellisense extension. И, как рекламирует веб-сайт Tailwind CSS, на самом деле он поможет создавать современные веб-сайты быстро.

Уровень абстракции должен улучшить взаимодействие с разработчиком

Основные причины, по которым мы используем уровень абстракции, — это удобство, простота или и то, и другое. Так что опыт разработчика (DX) важен. С помощью Tailwind CSS вместо написания HTML и CSS в разных файлах вы объединяете этот процесс с служебными классами в своем HTML. Это всего лишь одним файлом меньше для переключения туда и обратно. Tailwind CSS также заботится о проблемах совместимости браузеров. И эти мельчайшие подробности, которые заставляют вас ненавидеть CSS. Это делает вас продуктивным, как и ожидалось от хорошего уровня абстракции.

Уровни абстракции и производительность

Слои абстракции могут снизить производительность. ElectronJS — хороший тому пример. Типичный ответ на это заключается в том, что современное оборудование может справиться с этим. Или что мы можем добавить больше памяти, хранилища или вычислительной мощности. Это не идеально по многим причинам. Одним из них является пользовательский опыт (UX). Я забыл разницу между ElectronJS и нативными настольными приложениями. Моим приложением для заметок был ElectronJS, а для кодирования я использую VSCodium. Затем есть Slack, Discord и многие другие, использующие ElectronJS. Поэтому, когда я использовал текстовый редактор LiteXL, это просто поразило меня. Но это напомнило мне, как должны работать приложения. Наш выбор слоев абстракции может иметь решающее значение. И производительность в слоях абстракции имеет значение!

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

Раньше я использовал Bulma CSS для моего сайта. Мой переход на Tailwind CSS сократил мои строки таблицы стилей с 12 726 строк CSS до 805 строк CSS.

Не только строки кода. Размер файла моей таблицы стилей также уменьшился. С 247.1KB по 13.0KB. Это сделало мой сайт быстрым. Мне нравится, что мой сайт загружает страницы быстрее.

Дизайн для более чем 80%

Уровень абстракции должен быть привлекательным не только для широкой аудитории (80%). Он также должен быть разработан для опытных пользователей и мастеров (20%). Многие используемые нами уровни абстракции не подходят для опытных пользователей и мастеров. Но Tailwind CSS может доказать, что вы ошибаетесь.

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

  • Функция произвольного свойства: помогает использовать свойство CSS, которое еще не поддерживается в Tailwind CSS. Просто поместите любое свойство CSS в квадратную скобку, например [css property to use], вместо имени служебного класса, и вуаля! Вы только что использовали свойство CSS внутри Tailwind CSS. В приведенном ниже примере я использую свойство CSS clip-path в качестве произвольного значения.
<img class=”[clip-path:circle(50%)]” src=”https://geekculture.co/wp-content/uploads/2019/01/takeru-satoh-ruroni-kenshin.jpg" alt=”An image to try out clip-path feature of CSS”/>

  • Функция произвольного значения: позволяет использовать собственные значения CSS в служебных классах. Вы можете заменить значение класса полезности квадратной скобкой, например [20rem]. Теперь вы используете произвольное значение, которое не является частью служебных классов. Вы можете использовать любые единицы CSS, такие как rem, em, px, vh, vw или %..
<div class=”w-[80%]”>Checking the width!</div>

Мало того, вы можете широко настраивать Tailwind CSS. Поскольку это выходит за рамки этой статьи, позвольте мне перенаправить вас к документации по Tailwind CSS.

Плохая часть

Не все хорошо в Tailwind CSS. Итак, вот другая сторона слоев абстракции/попутного ветра CSS.

Всегда есть цена, которую нужно заплатить

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

Другая сторона вспомогательных классов в Tailwind CSS: удобочитаемость и ремонтопригодность
Вспомогательные классы великолепны. Но с служебными классами удобочитаемость и ремонтопригодность ухудшаются по мере усложнения. Что заканчивается длинным списком служебных классов. В приведенном ниже примере я настраиваю теги HTML, связанные с файлом уценки. Настройка класса prose, который поставляется с официальным плагином типографики Tailwind CSS. Он уже предоставляет базовые стили для элементов уценки, таких как теги blockquote и code. Но если вы хотите настроить его дальше, произойдет следующее. Эти ситуации неизбежны при глубоком погружении в Tailwind CSS. Большинство известных мне жалоб на Tailwind CSS связаны именно с этим.

<article class=”text-lg prose-headings:font-semibold py-1
 prose-sm prose-gray prose-a:underline prose-a:decoration-2 hover:prose-a:text-blue-600
 prose-ul:list-disc prose-code:bg-gray-300 prose-code:p-1 prose-code:rounded
 prose-pre:overflow-x-auto prose-pre:text-lg prose-code:prose-pre:bg-[#272822] prose-pre:rounded prose-pre:px-4 prose-pre:py-1
 prose-blockquote:border-l-4 prose-blockquote:italic prose-blockquote:border-gray-600 prose-blockquote:bg-gray-200
 prose-blockquote:px-4 prose-blockquote:py-2 prose-blockquote:rounded prose-img:mx-auto
 prose-hr:p-0 prose-hr:m-0 prose-headings:my-0 prose-headings:py-2
 “>
 <div>A div element</div>
</article>

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

Другое решение — поддерживать чистоту HTML-разметки. Вы можете сделать это, сопоставив служебные классы с именем класса CSS. И это можно добавить в слой компонентов Tailwind, добавив вот так в ваш main.css. Затем вы можете вызвать имя класса из HTML, как и другие служебные классы. Но вы не должны перебарщивать с добавлением пользовательского CSS, подобного этому. Это следует использовать в крайнем случае, так как это не рекомендуемый метод.

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .styleMarkdown {
     @apply text-lg prose-headings:font-semibold py-1
     prose-sm prose-gray prose-a:underline prose-a:decoration-2      hover:prose-a:text-blue-600
     prose-ul:list-disc prose-code:bg-gray-300 prose-code:p-1 prose-code:rounded
     prose-pre:overflow-x-auto prose-pre:text-lg prose-code:prose-  pre:bg-[#277322] prose-pre:rounded prose-pre:px-4 prose-pre:py-1
     prose-blockquote:border-l-4 prose-blockquote:italic prose-blockquote:border-gray-600 prose-blockquote:bg-gray-200
     prose-blockquote:px-4 prose-blockquote:py-2 prose-blockquote:rounded prose-img:mx-auto
     prose-hr:p-0 prose-hr:m-0 prose-headings:my-0 prose-headings:py-2
  }
}

В заключение

Любой, кто собирается регулярно использовать CSS, оценит Tailwind CSS. Я все еще думаю, что существует рынок основанных на компонентах CSS-фреймворков. Я поклонник эстетики Bulma CSS. Я также уверен, что есть места, где Tailwind CSS можно улучшить. Вот почему я использовал «хороший» уровень абстракции вместо «идеального» уровня абстракции. Но это в значительной степени там. Это действительно изменило то, как я пишу CSS и как я изучаю CSS.

Ресурсы/ссылки

Это сообщение было впервые опубликовано на https://www.unsungnovelty.org под заголовком «Объяснение того, что такое хороший уровень абстракции с помощью Tailwind CSS».