Компонентная вёрстка по UI Kit на Bootsrap примеры, как делать не надо и как делать надо

Начните с базового ui-kit добавляя в него необходимые компоненты по мере надобности, которые могут повторно быть использованы. В первую очередь это типографика, кнопки и так далее.

Как не надо делать:

<div class="top-header__title title-def title-def_main">Мои клиенты</div>

в модалках потом используется всё тот же шрифт, где то ещё он может потом использоваться, зачем плодить классы?
для этого есть типографика в ui kit, дизайнер везде указывает какой шрифт из ui kit он использовал
это Title 28 Bold
создаем соответсвующие классы из типографики ui-kit и применяем их в любом нужном месте проекта.

Title 28 Bold
Headline 20 Bold
Body 16 Regular
Headline 14 Regular
Headline 14 Meduim
Body 14 Regular
Small 13 Regular
Caption 12 Regular
Caption 10 Regular

попросим gpt: вот названия типогафики дизайнера в ui kit сделай мне из этого названия классов под ui kit верстки, без привзяки к цифрам пожалуйста, только названия.

.title-bold {}
.headline-bold {}
.body-regular {}
.headline-regular {}
.headline-medium {}
.body-small-regular {}
.small-regular {}
.caption-regular {}
.caption-small-regular {}

вот компоненты типографики которые будем применять по проекту, прописываем что там по их css свойствам и юзаем эти классы затем везде где они есть.
Всё то же самое касается остальных компонентов из UI Kit — input элементов форм, кнопок, цветов и т.п. что там есть.

.top-header__title {
overflow: hidden;
white-space: nowrap;
}

этот для чего класс?

в бустрапе есть те же готовые классы, не приколоченные гвоздями к header/title.

Верстаем, компонентную верстку по UI Kit на bootsrap 5.3:

<div class="title-bold text-black overflow-hidden text-nowrap">Мои клиенты</div>

это

sidebar-def__btn btn btn-primary

аналогично, есть готовые классы для отступов вниз (mb-*), не приколоченные гвоздями к sidebar-def/btn.

tabs-def__link active

аналогично, не факт что это будет отсноситься к tabs всегда, это просто кнопка, и может понадобиться такая кнопка в любом месте проекта затем. Она есть в ui kit.

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