Объяснение того, что такое хороший слой абстракции с помощью Tailwind CSS

Слои абстракции очень субъективны и зависят от того, что, когда и как вам нужно. Этот пост основан на моем опыте работы с 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 и grid layout, вы можете использовать все преимущества Tailwind CSS. Ведь когда вы используете Tailwind CSS, вы все еще думаете на CSS. По мере того как вы пишете с помощью Tailwind CSS, вы также будете изучать CSS. А я изучаю и понимаю CSS больше благодаря Tailwind CSS.

С помощью Tailwind CSS легко сделать так, чтобы 5 элементов отображались в строку на мобильных устройствах и в столбик на больших экранах. Все, что вам нужно сделать, это написать ниже с помощью классов 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. И как рекламирует сайт 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>

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

• https://tailwindcss.com/docs/configuration
• https://tailwindcss.com/docs/adding-custom-styles

Плохие стороны

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

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

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

Другая сторона утилитарных классов в Tailwind CSS: Читабельность и удобство сопровождения

Утилитарные классы – это здорово. Но с утилитарными классами читаемость и сопровождаемость ухудшаются по мере усложнения. В итоге получается длинный список классов полезности. В приведенном ниже примере я настраиваю HTML-теги, связанные с файлом разметки. Настраиваю класс prose, который поставляется с официальным плагином типографики Tailwind CSS. Он уже предоставляет базовую стилизацию для элементов markdown, таких как теги 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
    ">

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

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

/* main.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.

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

• Что нового в Tailwind CSS v3 от Tailwind Labs – https://youtu.be/mSC6GwizOag.

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