Какой смысл так делать?

Question

[godsplane]

elem {
--translateY: -186.732px;
    transform: translateY(var(--translateY));
}

При скролле значение переменной translateY меняется и, соответственно, меняется transform, почему бы сразу не указывать значение в свойство transform? Зачем эта лишняя переменная?

Comments

[Сергей Сергей]

чтобы менять в скрипте.

[iBird Rose]

а дефолтное значение в переменной --translateY откуда должно появиться ДО того как скрипт сработает?

[godsplane]

iBird Rose, можно обойтись без переменной и просто в стилях указать допустим transform translate : 0
Сергей Сергей, это понятно, но зачем ее менять если можно задать значение напрямую

[Сергей Сергей]

godsplane, бывает удобнее разделить вычисления и конкатенацию строк.

[wadowad]

Например, js не может менять свойства псевдоэлементов, но js может менять значения сss-переменных, которые уже можно использовать в стилях псевдоэлементов.

[Ankhena]

Смыслов полно:

1. Передать в псевдоэлемент
2. Передать дочерним элементам
3. Переиспользовать
4. В JS вычисляем значение, а в CSS можем использовать его сегодня для трансформ, а завтра для точки перехода градиента, не меняя скрипта.

Ещё что-нибудь, что не пришло мне в голову пока печатала.

Answer 1

[imko]

Есть смысл в контексте использования со скриптом который должен ее менять. Если скриптом напрямую задавать стили позиционирования будут ругаться некоторые браузеры, как минимум firefox

Comments

[godsplane]

не понял. Почему фаерфокс ругается при задавании стилей позиционирования напрямую?

[imko]

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

window.addEventListener('scroll', function () {
		object.style["background-position"] = `center bottom calc(${startPosition} + ${window.pageYOffset * multiplier}px)`
	}, {
		passive: true
	})

Ссылка из предупреждения
При этом он в принципе блокирует кусок кода. Если вместо этого просто ставить цсс-переменную которая уже в стилях подставляется в значение background-position то все хорошо