Верстка поворот не туда?

В целом, ты прав: переменные в SCSS — это удобнее, чем менять деструктурированные стили в HTML. А этот подход с классами и стилями внутри — скорее для быстрого прототипа или небольшого проекта. В чем конкретная проблема, которую пытаешься решить?

так это ты про какой-то сайт на конструкторе? иначе я не вижу смысла запихивать такое количество классов в верстку

Как по мне, лучше уж классы универсальные, короткие и общие, а вот сами css (или scss) уже формировать максимально масштабируемо 

как минимум через переменные --var. Можно двойной или тройной связкой, если есть правильно сформированные паттерны 

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

да походу это конструктор, поискал кажется это next.js вот с их офф сайта  кусочек кода, один фиг не понятно с чем связан такой подход

class="outline-none m-0 p-0 border-0 text-base align-baseline no-underline relative cursor-pointer select-none bg-none transform translate-z-0 flex text-[var(--themed-fg,_var(--ds-background-100))] bg-[var(--themed-bg,_var(--ds-gray-1000))] bg-none font-medium !px-(--geist-gap-half) max-w-full items-center justify-center transition-[border-color, background,color,transform,box-shadow] duration-[150ms] ease-in-out data-[focus]:transition-none data-[focus]:shadow-[var(--ds-focus-ring)] [&_svg]:shrink-0 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:text-[var(--ds-gray-700)] disabled:bg-[var(--ds-gray-100)] aria-disabled:text-[var(--ds-gray-700)] aria-disabled:bg-[var(--ds-gray-100)] disabled:![--themed-border:_var(--ds-gray-400)] [--x-padding:14px] [--height:48px] text-[16px] !pl-[var(--x-padding)] !pr-[var(--x-padding)] rounded-md [--themed-bg:_var(--ds-background-100)] shadow-[0_0_0_1px_var(--themed-border,_transparent)] [--themed-hover-bg:_var(--ds-gray-alpha-200)] [--themed-fg:_var(--ds-gray-1000)] [--themed-border:_var(--ds-gray-alpha-400)] data-[focus]:shadow-[0_0_0_1px_var(--themed-border,_transparent),0_0_0_2px_var(--ds-background-100),0_0_0_4px_var(--ds-focus-color)] data-[focus]:transition-none h-[var(--geist-form-large-height)] text-(length:--geist-form-large-font) leading-[var(--geist-form-large-line-height)] rounded-[8px] h-[var(--height)] data-hover:bg-[var(--ds-gray-100)] dark-theme:data-hover:bg-[var(--ds-gray-200)] dark-theme:data-hover:![--themed-border:hsla(0,_0%,_100%,_0.17)] data-hover:![--themed-border:hsla(0,_0%,_0%,_0.12)] data-hover:text-[var(--themed-fg)] data-hover:disabled:bg-[var(--ds-gray-100)]"

Есть такие балбесы которые классы называют так "bg-white w-[100%]  max-w[360px] shadow-[2px_4px_8px_1px_rgba(160,160,160,0.6)] border border-black-50 border-radius-[10px]" чтобы видно было, что этот класс делает. Это из ООП программирования пришло (типа ClassElectrucCarEngineTransmission) и многие считают что это кашерно.. 😁 упс. потому что их так научили.. 🤣

Похоже, что это Tailwind (tailwindcss.com)

Очень неплохо показывает себя при компонентном подходе, как при применении Vue.js, например. Плюс кроссбраузерность.

Если у вас обычная верстка без компонентов, то такой подход скорее всего будет очень неудобным и надо применять что-то ещё (может быть системы именования классов аля БЭМ, их много).

Верно, это tailwind - мега популярный css фреймворк. А если вы используете vs code, то в сочетании с расширением Tailwind CSS IntelliSense фреймворк очень удобен.

Это просто обыкновенная лень. В какой то версии tailwind такое "разрешили" (как я понимаю).  За счет этого стали быстро накидывать прототипы. И это потом перекочевало  в прод. Ни кто так не учит делать для боя. Это скорее от тех кто не до конца читает доку, или не умеет в нее вникать.

И это не из ООП от слова совсем (если кто то следует таким же принципам в ООП - ну это только если от глупости)

А вообще что bootstrap что tailwind позволяют быстро создавать верстку - если дизайн позволяет, (или бюджет не позволяет делать более тонко) - это нормальный инструмент и выход (с оговоркой, что применять его надо правильно, а не так как в начальном сообщении темы)