Кнопочки и CSS переменные?

Question

[SuperToster]

Привет, CSS-ниндзя!

Пытался сделать кнопочки. В теме с переменными я только поверхностно, по этому немного переживаю, что какая то дичь получилась ^^..

Подскажите пожалуйста, имеет ли право на жизнь такой подход? Если да, что можно улучшить?
Большое спасибо!

jsfiddle.net/uxuipro/n6rf8ugb/ (Cтили упростил, чтобы локализовать пример: условные 4 состояния кнопочки).

Comments

[ForSureN1]

Что то я не понял, для чего вот эти все вычисления ?

[Роман Ямчук]

Вы бы ж ещё спросили как переменные называть =)

[tantumus21]

ForSureN1, опробовать переменные в действии?

[SuperToster]

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

[SuperToster]

Роман Ямчук, нууу... К стати, на счёт этого я бы тоже советы послушал. Вполне вероятно, что есть "хороший тон" которого стоит придерживаться, а я написал неправильно.

[ForSureN1]

SuperToster, так к примеру у нас есть 5 состояний кнопок, задай им через background-color: #xxx на каждую из 5 переменных и все, либо я не понял чего то, либо автор усложняет себе жизнь

[Ankhena]

SuperToster, ждите это https://www.youtube.com/watch?v=-6V7EvfUs3k

Вряд ли дизайнер сделает вам состояния кнопок с разницей в цвете с каким-то одинаковым шагом. Мечтать полезно, но обычно нет.

Мне больше нравится подход, при котором свойство (в вашем случае это background-color) не повторяется.

В упрощенном виде:

--bg: gray

.btn {
background-color: var(--bg);
}
.btn--primary {
  --bg: red
}
.btn--second {
  --bg: blue
}

т.е. переопределяется только переменная.
А у вас и то и другое.

[SuperToster]

Ankhena,

Вряд ли дизайнер сделает вам состояния кнопок с разницей в цвете с каким-то одинаковым шагом. Мечтать полезно, но обычно нет.

Хотелки дизайнера у нас жестко регламентируются. Например с цветом работа будет в порядке важности:

1. Объективные необходимости, например: экономия энергии устройства с AMOLED-дисплеем в зависимости от цвета, цифровое напряжение зрения, пользователи с ограниченным зрением и т. п.
2. Удобство технической реализации.
3. И в самом конце — субъективные представления о красоте.

Если для технической реализации проще использовать увеличение значения интенсивности излучения цвета на какой то шаг, и это не противоречит 1. пункту — то будет сделано именно так.

И если дизайнер продавливает какое то решение по тому, что "так красивенько" по его скромному мнению, сразу получает по башке ^^. Но такого почти не случается по тому, что все дружат и решения принимаются исходя из логики и объективной необходимости.

За пример спасибо, интересно, пойду попробую накатить на свою задачу )

[SuperToster]

Ankhena, Можно посмотреть гайдлайны Material, где для состояний кнопок используется overlay opacity values со вполне себе фиксированными значениями и шагом в процентах. И дизайнеры пользуются и не жужжат ^^

[Ankhena]

SuperToster, мне лень было писать про исключения типа material

Answer 1

[Pavel-ww]

В теме с переменными я только поверхностно, по этому немного переживаю, что какая то дичь получилась ^^..

Ничёси поверхностно)). Заморочился прямо...
Если требуется такое тонкое управление цветом где нибудь в скрипте, то подход вполне имеет право на жизнь. Но если не требуется, то это дичь ))). И "состояния" тоже в root стоило бы поместить с объединением в более глобальные переменные, потому что запись в элементах с calc, уж это точно дичь

Comments

[SuperToster]

Pavel-ww,

Ничёси поверхностно))

"состояния" тоже в root стоило бы поместить с объединением в более глобальные переменные

Ну всё-таки поверхностно) Например не очень понимаю, как можно было бы объеденить состояние в переменную

.red-active {
  background-color: rgb(
    calc(var(--red-r) - calc(var(--btn-hue) * 2)),
    calc(var(--red-g) - calc(var(--btn-hue) * 2)),
    calc(var(--red-b) - calc(var(--btn-hue) * 2))
  );
}

Если требуется такое тонкое управление цветом где нибудь в скрипте

Это так

то подход вполне имеет право на жизнь.

Спасибо!

[Pavel-ww]

Например не очень понимаю, как можно было бы объеденить состояние в переменную

Так же как вы объединили --red-rgb-full и --gray-rgb-full. Вся калькуляция в root, а в элементах только целые, объединенные переменные.

Это так

Судя по реплике, вам это не нужно. Но я не знаю вашу авторскую задумку и то, что вы пытаетесь построить. Например можно было бы не разделять rgb на каналы в виде отдельных переменных. Или можно было бы использовать rgba с разными значениями альфа канала. То есть всё это записать гораздо проще, с меньшим количеством кода.

Ваш вопрос в целом не имеет отношения к переменным, так как с ними всё просто - объявляете, калькулируете что надо, добавляете в свойство элемента.

Тут больше вопрос работы с цветами - их микширование. А логика всего этого зависит только от вашей задумки.

Answer 2

[Владимир Юрченков]

Нужны переменные, используйте переменные.
Не нужны переменные, не используйте переменные.