Frontend без CSS

Как делать web-интерфейсы, если ты бэкендер.

CSS это боль

Если ты делал сайтики в палеозойскую эру, то, возможно, помнишь, что был такой прикольный UI-фреймворк — Bootstrap. Он сильно облегчал прототипирование и позволял быстро накидывать интерфейсы. Эпоха ушла, теперь Tailwind — король.

🧱 TailwindCSS

Это утилитарный CSS-фреймворк. Если ты в танке или далек от веба, то вкратце: мы больше не пишем кастомные стили, мы просто раскидываешь utility-классы по HTML.

Было:

<style>
    .btn {
        background-color: blue;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
    }
</style>

<button class="btn">
    Я синяя кнопка
</button>

Стало:

<button class="bg-blue-600 text-white font-bold py-2 px-4 rounded">
    Я синяя кнопка
</button>

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

Цвета и базовые размеры задаются в настройках темы один раз и потом используются по всему проекту. Например, bg-blue-600 — это нужный оттенок синего, а text-xl — это “большой текст”. Все hex, rgb и пиксельные размеры вынесены в конфиг и легко меняются.

CSS-классы в привычном понимании пришлось выкинуть, так как, по мнению создателя Tailwind, они только всё усложняют. Спорный момент, конечно, но да ладно.

Стало чуть удобнее работать с вьюхами, но есть минус: этих утилити-классов реально много на каждом элементе, и вьюхи сильно засираются. Это всё начинает выглядеть вот так:

<div class="max-w-sm bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200 hover:shadow-2xl transition-all duration-300">
    <img class="w-full h-48 object-cover" src="...">
    <h2 class="text-2xl font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-200">
        Majestic Landscape
    </h2>
    <p class="text-gray-500 text-sm">
        A breathtaking view captured during golden hour.
    </p>
    <button class="mt-4 self-start bg-blue-600 text-white px-5 py-2 rounded-xl text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 transition-all">
        Learn More
    </button>
</div>

Вьюхи снова превращаются в лапшу, и читать становится невозможно. Для этого в Tailwind есть решение.

Лучший монитор для Tailwind

Нет, не широкий монитор. Повторяющиеся наборы стилей можно сгруппировать с помощью @apply и использовать так:

.btn {
    @apply mt-4 self-start bg-blue-600 text-white px-5 py-2 rounded-xl text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 transition-all;
}

Напоминает что-нибудь? Да, мы снова пишем классы и никуда от них не ушли. Но теперь кнопка может выглядеть как кнопка:

<button class="btn">
    Learn More
</button>

Т.е. теперь для создания UI компонентов и переиспользования их по всему проекту надо создать эти “группы” классов… Для всего UI… Звучит как шляпа. И так оно и есть. И тут мы подходим к тому, что переизобретаем Bootstrap заново.

Напрашивается вопрос: а есть ли “Bootstrap на Tailwind”? И да, есть.

🎨 DaisyUI

Это как раз тот самый Bootstrap для Tailwind. Компоненты, темизация, красивый внешний вид прямо из коробки. Всё на тех же утилитарных классах, но проще.

<button class="btn btn-primary">
    Click me
</button>

Можно миксовать с Tailwind: если хочешь, кастомизируешь, а не хочешь — быстро накидываешь интерфейс, и готово. Экономит время.

Пример с DaisyUI

Напрашивается вопрос: а почему не использовать просто Bootstrap? Чтош… хороший вопрос 😅. Потому что “просто Bootstrap” сильно ограничен. Если вдруг потребуется что-то, чего нет среди его стандартных классов, придется писать CSS. А это минус вайб. Кроме того, Bootstrap скорее мертв, чем жив — не видел его на проектах уже много лет, в отличие от Tailwind, который сейчас везде.

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

Тем не менее проблема решена — мы не пишем CSS, используем современные штуки и быстро накидываем UI, грех жаловаться.

Ну и еще нам потребуются…

🧩 Иконки

Без иконок интерфейс смотрится пустым. Но тут, в мире иконок, ничего нового не произошло. SVG, как и раньше, пихают огромными кусками прямо во вьюхи или, в лучшем случае, подгружают из файла.

Эти две библиотеки бесплатные, и там есть всё для MVP и прототипов. Из Heroicons просто берёшь нужные SVG, а Lucide можно использовать через атрибуты:

<i data-lucide="menu"></i>

Ну вот, пожалуй, и все. Теперь можно говнячить всякие менюшки и кнопки быстро и без лишней возни.