CSS и UI библиотеки

Что такое CSS и UI библиотеки?

CSS и UI библиотеки либо предоставляют свои, либо помогают создавать кастомные UI компоненты типа Button или Select? что может значительно ускорить разработку.

CSS библиотеки не содержат JavaScript кода и, соответственно, имеют ограничения для сложных компонент типа Select или Dropdown.

Есть отдельный тип Headless-UI библиотек, которые предлагают компоненты без стилизованной визуализации - только логику компонента и Accessibility требования. Разработчику нужно самому добавить CSS стили.

Плюсы и минусы UI библиотек?

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

Минусы: как и любая зависимость может устареть (трагедия Vuetify 2), добавляет веса в итоговый бандл.

В этой статье хорошо сравниваются 10 Vue 3 UI библиотек.

Как снизить зависимость от чужих библиотек?

Оборачивайте компоненты UI библиотеки в свои.

vue

<!-- BaseButton.vue -->
<template>
  <QButton ... />
</template>

и используйте в своем коде BaseButton. Таким образом в дальнейшем вам будет намного проще проапгрейдиться, заменить библиотеку или заменить данный компонент на самописный. И даже просто изменить у компонента стили.

Лэйаут и адаптивность страниц средствами CSS и UI библиотек

Использование колоночной системы и иного функционала CSS и UI библиотек типа распространенного Tailwind удобно для небольших проектов и иногда ускоряет верстку, однако очень сильно ухудшает качество кода в целом, включая его поддерживаемость и расширяемость. Как будто мир вновь вернулся во времена IE6, когда все стили и JavaScript также располагались в аттрибутах тэгов, и вся эволюция CSS в понятную, удобную, красивую иерарxичную модель классов была зря, как и разделение веба на документ (шаблон), презентационный слой (CSS стили) и логику (JavaScript).

В интернете полно статей, почему подход подобный Tailwind это плохо. Можно отметить только, что при должном умении верстать на чистом CSS3 также быстро и намного удобней и приятней в плане DX, чем через средства CSS и UI библиотек.

Цитата

Хорошие разработчики знают причины, по которым стандарты, паттерны и хорошие практики стали таковыми.

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

CSS и UI библиотеки ​

CSS и UI библиотеки