Пора ли использовать CSS переменные?

Question

[riddlr]

Поддержка уже почти 90%, но нету поддержки IE.
Также заметил что Буцтрап использует их.

Значит ли это что пора?

Comments

[sim3x]

curl -vs https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css 2>/dev/null | grep 'var'

про какое именно использование идет речь?

[riddlr]

Как выяснилось, они из задекларировали, но не использовали.

Answer 1

[AngReload]

Знаю что уже сейчас css переменные успешно используются на pikabu для смены палитры сайта и тёмной темы. Не без фолбэков, разумеется.

body {
  background-color: #f4f4f4;
  background-color: var(--color--app__bg);
  color: #212121;
  color: var(--color--app__text);
}

Comments

[riddlr]

Спасибо за отличный пример. Обязательно изучу как у них все устроено.

[riddlr]

Интересно, а разве так фолбек не сработает?

background-color: var(--color--app__bg, #f4f4f4)

Или это фолбек только для браузеров которые уже поддерживают (например сли переменная нерабочая)

[AngReload]

riddlr, нет, не сработает.

[riddlr]

Alice Shevtsova, ну ютуб такие ребята, что могут себе позволить для IE сделать отдельную версию с нуля)))

Answer 2

[alex]

Бессмысленный вопрос. Использовать ту или иную технологию нужно в зависимости от того на какой зоопарк браузеров ваш проект будет ориентирован. Все.

Comments

[riddlr]

Бессмысленный ответ. Откуда я знаю какой зоопарк будет завтра? Ты наверное телепат?

[Stalker_RED]

riddlr, бессмысленный наезд на телепатов. Зоопарк обычно оперделяется в ТЗ. В идеале - еще до начала проектирования, по результатам исследования ЦА или по "ну обычно мы делаем вот под такой".

[riddlr]

Stalker_RED, в ТЗ это вилами по воде.

[alex]

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

[riddlr]

Alex, я пишу много разных продуктов, в большинстве случаев это неведомая для меня доныне аудитория. Вы мне предлагаете гадать на кофейной гуще и принимать по этому решение. Ваша статистика в 90% это бессмысленный шум (потмоу что погрешность всегда будет примерно в диапазоне нескольких процентов, какая нахер разница 1% юзеров с браузером или 5%, пока там нету цифр с 6 нулями?)

[riddlr]

Incry, другие варианты кроме как работы на дядю в голову не приходят? Я сам дядя! И знаю из какого воздуха берутся ТЗ.

[alex]

riddlr, поймите, что любые дебаты по таким вопросам как сабж, в конечном итоге сведутся к анализу вашей ЦА и к готовности вас как «дяди» ингорировать или нет определенную группу браузеров => клиентов => деньги

[riddlr]

Incry, ну а с чего вы решили что я перевожу какой-то текущий проект на переменные вообще? Какую аналитику я должен открывать в таком случае?

[Сергей delphinpro]

riddlr,

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

ну тогда и ответ на ваш вопрос очевиден — вам необходимо охватить максимальное кол-во пользователей, а значит конкретно вам еще рано использовать css переменные.

[riddlr]

Сергей delphinpro, хороший рациональный совет. Но проблема в том, что я хочу их использовать в своем стартере прямо сейчас. Я был в шаге от того чтобы вынести переменные в JSON файл, потмо вспомнил про нативные переменные))

[riddlr]

Incry, спс за совет. В целом про меня п.1. Но ради интереса надо взять десяток топовых магазинов с современным фронтом и посмотреть как у них?

[Сергей delphinpro]

riddlr,

Но проблема в том, что я хочу их использовать в своем стартере прямо сейчас.

Если нельзя но очень хочется, то можно =)
Заюзайте полифил.

[riddlr]

Сергей delphinpro, не нашел полифила. Есть какой-то код на кодепене, но люди пишут что он не работает в IE (я не пробовал)

[Sam Pie]

А кто мешает отправлять стили с варами только тем, кто это дело поддерживает?

[riddlr]

Sam Pie, никто не мешает, но это идиотизм, когда можно просто юзать фоллбеки.

[vreitech]

riddlr, завтра будет тот же зоопарк, что и сегодня. это же очевидно.

[riddlr]

vreitech, по твоему сайт kremlin.ru и сайт vk.com имеют один и тот же зоопарк?

[vreitech]

riddlr, а по-твоему?

[riddlr]

vreitech, еврей?

[vreitech]

riddlr, антисемит?

[riddlr]

vreitech, ну а как с вами иначе?

Answer 3

[NaN]

а в чем смысл?
полностью отказаться от препроцессоров все равно не получится, так так в настоящее время там больше возможностей. (миксины, функции и т.д). Пока все это не появится в чистом css не вижу смысла использовать.

Можно пример, где bootstrap использует css переменные? потому что мне кажется он использует возможности sass

Comments

[riddlr]

Никто не говорит об отказе от препроцессоров. Но нативные переменные имеют фичи которые не может никакой препроцессор.

ЗЫ: Использую стайлус, но не использую ни миксины ни функции.

[NaN]

но просто зачем использовать так скажем 2 технологии, если проще одной?

[riddlr]

Я открыл скомпилированный файл в dist Буцтрапа. Там переменные.

[riddlr]

NaN, какие две технологии?)))

[NaN]

я образно)
Просто зачем использовать css-переменные и переменные в препроцессорах, одно дело когда все на чистом или css или scss или чем-либо еще. Мне кажется возникнет путаница. Или проще говоря будет не удобно

[riddlr]

NaN, потому что нативные переменные могут делать волшебные вещи, на которые препроцессоры не способны по умолчанию

[NaN]

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

[riddlr]

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

[Антон Спирин]

riddlr,

потому что нативные переменные могут делать волшебные вещи, на которые препроцессоры не способны

Когда в вашем проекте будут кейсы, которые не будут покрываться с помощью препроцессоров, тогда это и будет аргументом за. Если их нет, то польза от css-переменных сомнительна. Я, например, в проектах css-in-js использую. Возможности там сейчас безграничны, но это не значит, что всем надо скорей отказываться от препроцессоров и тянуть в свои проекты css-in-js.
Используйте такой стек, который поможет эффективно решать поставленные задачи и который вам проще будет поддерживать и масштабировать.

[riddlr]

Антон Спирин, при чем тут препроцессоры вообще? Если речь о работоте собранного проекта. Предлагаю ознакомится с возможностями переменных для начала. css-in-js это омерзительная поделка реакта (которую никто из крупных игроков кстати не юзают, у них нету инлайн стилей как явления вообще). Я юзаю вью и у меня этого дерьма нету.

[Антон Спирин]

riddlr,

при чем тут препроцессоры вообще? Если речь о работоте собранного проекта. Предлагаю ознакомится с возможностями переменных для начала.

Вы, видимо, совсем посыл текста не поняли.

. css-in-js это омерзительная поделка реакта (которую никто из крупных игроков кстати не юзают, у них нету инлайн стилей как явления вообще).

Не хочу вас огорчать, но:
1. css-in-js это не "поделка реакта".
2. css-in-js и inline стили - это не одно и то же.

которую никто из крупных игроков кстати не юзают

Первые попавшиеся "крупные игроки", которые "юзают":
https://www.airbnb.ru
https://www.reddit.com
https://www.codecademy.com/
https://www.tinkoff.ru/
https://www.uber.com/
https://www.instagram.com/
https://mobile.twitter.com
https://web.whatsapp.com/
https://material-ui.com/

у них нету инлайн стилей как явления вообще

Большинство "крупных игроков" как раз не гнушаются использовать inline стили в своих проектах, параллельно с классами (google, alibaba group, vk, amazon еtc).

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

Я юзаю вью и у меня этого дерьма нету.

Что-то из серии: "Я веган. Прекрасно себя чувствую."

[riddlr]

Только полный смузихлеб будет вообще вспоминать css-in-js когда тема касается CSS переменных. На вопрос к чему это было упомянуто - ответа нету.

[Антон Спирин]

riddlr,

На вопрос к чему это было упомянуто - ответа нету.

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

Answer 4

[Максим Тимофеев]

Пора ли использовать CSS переменные?

Конечно, уже же пол седьмого.

Поддержка уже почти 90%, но нету поддержки IE.

Что ж ты будешь делать

Значит ли это что пора?

Значит, что поддержка 90% и не более того

Answer 5

[Андрей Федоров]

Посмотрел я.метрику в нескольких проектах... За последний год посетители с IE версий 8-11 чуть меньше 4.85%. Кажется рано...

Comments

[riddlr]

5% - это сходится со статистикой Caniuse. Но ведь и флексбокс они поддерживают кое как. Значит ли это что и его не юзать?

[riddlr]

Кроме того, я же пишу Буцтрап их использует. Значит ли это что не надо его использовать по этим же соображениям (я его не юзаю и не собираюсь)

[Андрей Федоров]

У flexbox все же в IE11 частичная поддержка, а не полное остуствие...

[Stalker_RED]

riddlr, значит из 10000 посетителей 500 увидят вместо сайта неведомую хрень. Вашего работадателя или вас лично (если проект собственный) это устраивает?

[riddlr]

Stalker_RED, я испольую много фич. Например Intersection Observer, position sticky и тд. На некоторые есть полифил, на некоторые нету. Если я буду бегать за каждым процентом, то это будет в ущерб большинству т.к. у меня нету столько времени.

[Андрей Федоров]

5% - это в моих проектах. Смотрите метрику в своих. Возможно в ваши пользователи IE не используют.

[snap44]

riddlr, для флексов есть фолбеки.

[riddlr]

snap44, видимо для переменных тоже есть

[snap44]

riddlr, ага, указывать значения явно. Нно какой тогда смысл в переменных?

[riddlr]

snap44, в том что они будут работать в 90% случаев?)) Это мало?

Answer 6

[Александр]

Соответственно, если вам не надо поддерживать IE - используйте, иначе - используйте препроцессоры.

Comments

[riddlr]

Этот совет распространяется и на пользователей Буцтрап 4 (который юзает переменные)?

[Алексей Ярков]

riddlr, такое впечатление, что вы хотите, чтобы вас поуговаривали ))

[riddlr]

Алексей Ярков, согласен, похоже на то))) На самом деле хочу услышать веский довод ПРОТИВ. Я вот уже начал переписывать свою кодобазу на них, но есть маленький червячок сомнения))) Впрочем факт что Буцтрап их юзает, меня успокаивает.

[Виталий Першин]

riddlr, Если не ошибаюсь, переменные в четвертом бустрапе полной версии есть, но они не используются. Их можно использовать при собственной сборке

[riddlr]

Виталий, не могу утверждать. Но они используются на оф сайте + они есть в скомпилированном файле

[riddlr]

Nikolay Petyukh, вооот, это уже конкретно и полезно. А что с фолбеками у этих переменных? Просто хардкодить вторым аргументом? Я до этого вопроса еще не дошел.

[Виталий Першин]

riddlr, Я про скопилированный файл и говорю, переменные заявлены, но они не используются, пройдитесь поиском по файлу

[riddlr]

Виталий, прошелся. Вы правы - https://getbootstrap.com/docs/4.0/getting-started/...