По сути, в экосистеме внешнего интерфейса существует 3 типа библиотек пользовательского интерфейса:

  • CSS со сверхспособностями
  • Функциональные библиотеки
  • Библиотеки дизайн-системы

Давайте поговорим о каждом из этих типов и решим, стоит ли нам их использовать.

В эту категорию входят такие вещи, как SASS, Less, Tailwind и многие другие.

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

<!-- tailwind -->
<p class="text-lg font-semibold text-blue-800 p-4">Hello World!</p>

<!-- bootstrap -->
<button class="button">Click!</button>
Войти в полноэкранный режим

Выйти из полноэкранного режима

SASS и Less — это препроцессоры CSS, которые добавляют такие вещи, как примеси, переменные, вложенность и т. д. Многие из них будут доступны в обычном CSS, так что эти инструменты доживают свой век.

@mixin button-base() {
    @include typography(button);
    @include ripple-surface;
    @include ripple-radius-bounded;

    display: inline-flex;
    position: relative;
    height: $button-height;
    border: none;
    vertical-align: middle;

    &:hover {
        cursor: pointer;
    }

    &:disabled {
        color: $mdc-button-disabled-ink-color;
        cursor: default;
        pointer-events: none;
    }
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Плюсы:

  • возможно смешивание и вложение
  • легко настраиваемый
  • иногда отправляем быстрее


Минусы:

  • ненавижу свою работу, когда приходится отлаживать глубоко вложенные классы sass

Radix, Headless UI, React Aria и т. д.

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

Например, Headless UI прекрасно интегрируется с Tailwind:

import { useState } from "react";
import { Dialog } from "@headlessui/react";

function MyDialog() {
    let [isOpen, setIsOpen] = useState(true);

    return (
        <Dialog
            open={isOpen}
            onClose={() => setIsOpen(false)}
            className="relative z-50"
        >
            <div className="fixed inset-0 flex items-center justify-center p-4">
                <Dialog.Panel className="w-full max-w-sm rounded bg-white">
                    <Dialog.Title>Complete your order</Dialog.Title>

                    {/* ... */}
                </Dialog.Panel>
            </div>
        </Dialog>
    );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Плюсы:

  • полностью доступный
  • легко настраиваемый
  • отправить быстрее
  • не изобретать велосипед

Bootstrap, пожалуй, самый популярный. Вы берете один класс или компонент и вот ваша кнопка:

<button type="button" class="btn btn-primary">Primary</button>
Войти в полноэкранный режим

Выйти из полноэкранного режима

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


Плюсы


Минусы

  • вы столкнетесь с ограничениями
  • трудно настроить
  • все сайты выглядят одинаково

Вы, наверное, заметили, что я не упомянул MUI, Chakra UI и некоторые другие библиотеки. Библиотеки, которые находятся где-то посередине. Ни рыба, ни мясо.

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

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

Учитывая все вышесказанное, я рекомендую вам попробовать функциональные библиотеки и забыть о MUI.

Сильно вдохновлен Тео говорит о библиотеках css.