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

101

nash300

4 ноября 2025, 08:32

144

Всем привет. Верстка это не то чем я профессионально занимаюсь, но иногда приходиться немного в это лезть, может тут есть кто версткой занимается и может пояснить в чем плюсы такого подхода <div class="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]"></div> это не самая длинная запись ещё, так понимаю следующий виток эволюции <div style="background:white;width:100%;max-width:360px;...."></div>

Аргумент поменять в css свойство и оно везде изменится, ну такое себе, bg-white задать цвет gray или border-radius-[10px] задать 5px, это только путаница получается, проще уж переменные использовать в scss.

IM

8

isy.m

4 ноября 2025, 11:43

#1

nash300 :

Всем привет. Верстка это не то чем я профессионально занимаюсь, но иногда приходиться немного в это лезть, может тут есть кто версткой занимается и может пояснить в чем плюсы такого подхода <div class="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]"></div> это не самая длинная запись ещё, так понимаю следующий виток эволюции <div style="background:white;width:100%;max-width:360px;...."></div>

Аргумент поменять в css свойство и оно везде изменится, ну такое себе, bg-white задать цвет gray или border-radius-[10px] задать 5px, это только путаница получается, проще уж переменные использовать в scss.

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

Синхронизация папок и файлов CLS новая пузомерка гугла Html, css. hover

0

alhambra

4 ноября 2025, 12:56

#2

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

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

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

делаю сайты

Завтра 1 сентября! Наш События и Facebook PIXEL PHP, преимущества синглтона

N3

101

nash300

4 ноября 2025, 18:01

#3

isy.m #:

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

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

alhambra #:

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

Как по мне, лучше уж классы универсальные, короткие и общие, а вот сами 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)] [&amp;_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)]"

Звонок другу был...теперь помошь Проблема модерации в Sape. Какие движки сайтов (платные

L

256

livetv

4 ноября 2025, 18:16

#4

Я называю такой подход псевдопрограммированием

143

ArbNet

4 ноября 2025, 19:02

#5

nash300 #:
я не понимаю в чем плюс такого подхода

Есть такие балбесы которые классы называют так "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) и многие считают что это кашерно.. 😁 упс. потому что их так научили.. 🤣

Общие вопросы по хостингу Верстка вашего PSD в Фон-ссылка вместе с текстом

Что делать, если ваша email-рассылка попала в спам

VK приобрела 70% в структуре компании-разработчика red_mad_robot