Кастомные свойства или честный Sass вместо CSS-переменных на PostCSS 

01:36 Окружение и разметка 03:32 Стили для основы 06:06 Переменные на Sass 09:19 Переменные на PostCSS 14:15 Фолбеки для переменных 16:20 Переопределение свойств 19:46 Переменные и свойства 22:27 Выводы и советы

Видосы Вадима - наркотик в чистом виде. Спасибо, что живой.

половину видео поражался названию цветов))

Вадим, спасибо за новое видео. Как всегда - доступно объяснили. Не пропадайте пожалуйста.

*шутка про "шел ## день карантина, на ютуб вернулись сss-шорты "

Есть еще одна важная фишка кастомных свойств: возможность задавать произвольное значение через js и динамически менять его. У нас в чатике владелец сайта может задать произвольный цвет «темы», и, вместо того, чтобы раскладывать по всем зависимым компонентам инлайн-стили с нужным цветом, мы просто меняем значение переменной, а дальше все зависимые компоненты используют эту переменную. Ну и, конечно, это работает динамически: поменял цвет в настройках - виджет сразу перекрасился.

Полезное использование кастомных свойств - это темы на сайте. Один раз прописали цвета, один класс и вешаем его через JS для изменения всей расцветки(например, ночная тема).

Спасибо за возвращение!!!

Спасибо! Интересно и доступно, как всегда! ❤️

прическа отпад)) спасибо за разбор! ждем еще)

Вадим, спасибо за видео, полезная информация, к размышлению!

Я трижды лайк поставил! Спасибо большое, Вадим!

Спасибо, очень интересно и полезно, хочу ещё!

Спасибо, Вадим!! Каждое ваше видео как глоток свежего воздуха! 👍🏻👍🏻👍🏻

Огромное спасибо, Вадим! Пишу комментарии категорически редко, но это прекрасное видео!

Дякую за відео! Детально, ретельно, просто чудово пояснили :)

спасибо за работу, скучал по твоему годному контенту

Боже, Вадим, как же вы круто помогаете! Даже спустя год очень актуально

Спасибо! Познавательное видео. Надо нести в массы то как нужно использовать и для чего предназначена та или иная технология.

Наконец-то новые, сверх грамотные и сверх полезные видео. Большое человеческое спасибо!

Очень информативно, спасибо!

Лучший канал! Спасибо, Вадим!

Годнота подъехала Лайк

Ты прекрасно объяснил! Благодарю )

Еееееее! Я так вам рад! \o/

спасибо, было интересно

Можно пожалуйста больше видео, от такого приятного человека. Очень не хватает адекватной информации))

Вадим, как же не хватает твоих этих роликов.

Да лаааадно?..))) Дождались) Ставлю лайк не глядя :)

Спасибо за видео! Было бы еще здорово про custom elements чего-нибудь =3.

Вадим! Спасибо огромное!

Супер, мне понравилось

Вадим, как всегда, просто красавец.

Спасибо за видос, полезно

Спасибо огромное!

круто, спасибо)

Вадим, запишите пожалуйста видео о favicon'ках. А то уже какой день парюсь, но не могу разобраться в размерах.

Ещё не посмотрел, но лайк уже поставил

Спасибо!)

Вадим, новая прическа огонь!

Лайк, потом гляну)

спасибо!

Топ ❤️ ❤️ ❤️

Спасибо за классный разбор. Еще можно было упомянуть, что к css переменным удобно обращаться через js

Вадим, возвращайся чаще!

Вот так понятнее, я теперь товарищам буду это видео показывать. А то тенденция использовать технологии ради технологий последнее время повсеместна!

Может в следующем видео расскажешь о работе с кастомными свойствами: ограничения, переопределение их в js, вычисления и тд Видео в целом хорошее, но дальше теории оно не ушло увы. Покажи "фишечки" использования кастомных свойств, покажи то что можно сделать только с помощью них. Спасибо

Лайк

Благодарю за видео и расширенное понимание, кастомных css свойств. Использовать не приходилось, так как пользуюсь SCSS и отчасти понимал, что в css эти свойства - не просто переменные. А теперь понимаю, что кое где они мне прям нужны! Спасибо. Вот у меня вопрос в отношении стилизации задизейбленной опции в селекте (select > option[disabled]). Почему она поддаётся стилизации только при наличии пустого атрибута value (value=“”)? Без атрибута и с непустым значением стили не применяются...

Все доступно и подробно. Вопрос стоит ли использовать кастомные переменные только backround, color?

Спасибо, полезно) Полезно ли держать в scss переменных подключение custom prop.? Типа ₴brand-color: var(-brand-color);

Вадим, спасибо за видео! Скажите пожалуйста, что у вас за тема в VS Code и почему в терминале до сих пор bash$ а не zsh?

post.css - огонь!))

спасибо, дядь. ну и еще, это же можно сложить в комбо и писать со своими привычными переменными sass/less... и юзать еще и новую штуку для более ухищренных штук?

Вадим, было бы очень интересно посмотреть видео где ты рассказываешь о rem, em, px. Не считаешь ли ты что проблем от использования rem и em больше чем пользы. Спасибо.

Важная особенность кастомных свойств в том, что их значения можно менять на лету на странице, чего не сделаешь с уже собранными из SCSS. При этом, с помощью переменных в SCSS можно задавать сложные математические операции и выставлять логические условия, чего не сделаешь через кастомные свойства. Я к тому, что это все-таки не вкусовщина и просто так расслабиться не получится. Скорее нужно под задачу выбирать инструмент.

Да, очень привлекают кастомные свойства, так как в 99.99% использую scss только для переменных и для удобной работы с бэмом &__, &-- . Вот добавили бы в css такую возможность, для работы с БЭМ, то никогда бы и не использовал препроцессоры

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

Если я правильно понял, тут стоит выбор либо использовать кастомные переменные, если разработка идет под новые браузеры, либо если нужно поддерживать также старые браузеры но вид должен внешний быть в старых и новых браузерах одинаковый, то берем SCSS ₴wow-such-color: moccasin; и забыли про эти кастомные переменные? Или все-таки есть возможность писать код с использованием кастомных переменных с их переопределением не на глобальном уровне и при этом был какой-то полифилл или плагин, который генерирует отдельный css стили для браузеров (как раньше подключался отдельно для IE) которые не поддерживают кастомные переменные?

Думаю попробовать custom properties на живом сайте, а для IE задействовать полифил: github.com/nuxodin/ie11CustomProperties. Вроде и наследование и каскад должны с ним работать. Согласен, нет смысла использовать лишь синтаксис без функционала.

А возможно ли в sass использовать css-переменные чтоб и в IE11 заработало? Судя по всему, fallback в виде второго значения для var() не срабатывает

В твиттер-треде проблема-то и была описана довольно чётко: люди хотели бы использовать пользовательские свойства, но их тянет назад необходимость поддерживать что-то старое. Нас столько лет учили, что элегантная деградация дизайна это хорошо, что просто так взять и не использовать пользовательские свойства было бы странно. Если коротко, люди, которым просто нужны переменные для темизации, например, будут продолжать использовать пользовательский свойства как простые переменные. Возможно, мы даже увидим, не знаю, реализацию режима для слабовидящих для государственных сайтов на них. В этом нет ничего плохого.

Серьга как лого дебиана ((:

Получается с фоллбэчиться на ie можно без post-css, сразу на лету указывая через запятую фоллбэк ?

Вадим, а уточните, пожалуйста, про ваш пример с `.card-set--green/blue`. У нас есть отдельный блок `card-set`, есть отдельный блок `card`. По вашему примеру получается неявная связь между двумя независимыми блоками. Почему-то блок `card-set` внезапно узнает, что внутри карточки есть какие-то `fill`, `animal` и т.д., хотя его дело - только построить сетку для набора элементов, а что у элемента внутри ему всё равно. Или в данном случае это просто в угоду демонстрирования функционала и придираться не стоит?

Спасибо за видео. Кто-то смотрит статистику посещения сайта? Зачем поддерживать ie11?)

А что это за прога с символами эмоджи и прочими на 5:40?

Странно что это вызывает вопросы у народа, повально забивают на чтение документации? И мне кажется что css переменные можно использовать и в контексте с препроцессорами если опять таки взглянуть на это под правильным углом. Канал классный, лектор зачетный, хиповая футболка)

А какой есть вариант использовать нативные «Кастомные свойства», если хочется использовать их в медиазапросах? Одновременно использовать и препроцессор, и «кастомные свойства»? Или есть вариант получше?

я помню, что уже спрашивали на стриме, но не нашел с ходу. Что за редактор?

Спасибо за видео. Разделяю твою точку зрения. Что то я так и не смог понять весь этот балаган в твиттере.

Вадим, а как в CSS обстоят дела с манипуляцией цвета? Дело в том, что переписывая элементарную страничку на SASS я столкнулся с проблемой, что не могу сделать цвет (который задан кастомным свойством), скажем, на 20% более прозрачным или темнее. У sass к примеру есть отличные методы rgba, lighten, darken итд. cssnext когда-то предлагал функцию color(), которая вроде как была в в спецификациях будущего и справлялась с такими задачами (например: color( black, a(20%) )), но потом ее потом переименовали в color-mod(), а потом и вообще убрали из CSSWG. Уж очень нравится твоя идеи использовать только стандартизированные решения, но CSS не справляется даже с такой элементарной задачей. Хотелось бы видеть что-то в духе color( --link-color, a(20%) ), но увы, ничего подобного не нашел. Может я чего-то упускаю и решение проблемы есть?

а есть ли какой-то способ кастомизировать input type=date ?

почему карточки именно через article? они же не отдельный элемент,а имеют прямое отношение к товарной группе?

Очень интересная тема, но не раскрыта тема когда же все-таки применять эти 3 разные технологии?

А что у вас за шрифт в vscode?

Спасибо, отличное видео, но есть один нюанс ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nbN22yqEgM0.html - не надо было полностью удалять модификаторы, т.к. фон у .card-set будет работать в старых браузерах

ну, мое мнение по поводу переменных в css особо не поменялось... пока остаюсь на less... спасибо за видео)))

Як тема для VS Code називається?

Надо было писать в pre.css и компилировать в post.css :)

жаль, что редко про вёрстку рассказываешь...

Не знаю, использую --var и вообще не парюсь с тем, что надо дополнительно что-то устанавливать, прописывать, компилировать и делать другие лишние действия, если по итогу все равно браузер скушает css, а не лесс, сасс и пост. Так же как и не вижу смысла юзать typescript и аналоги. Лучше все уметь делать на максимально нативном коде и никогда не будет проблем.

Можно не по теме? Насколько оправдано использование здесь article, вместо списка?

IE 11 мертв, поэтому уже можно использовать переменные CSS.

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

Вадим, слишком близко =)

Футболка в этот раз не понравилась, когда псевдорукописный шрифт повторяется (2 буквы S), это сразу бросается в глаза. Само видео огонь.

Ты на память все цвета знаешь?

всегда думал что autoprefixer и есть post css.

А ты знаешь, что ты можешь запускать пакеты через npx и при этом не устанавливать их? :)

Смотрел и думал: а цвета из головы или из шпоргалки? Хочу думать что из головы! не переубеждайте меня пожалуйста. :-)

С CSS-переменными есть один неприятный кейс - они не работают в медиа-запросах :(

а что, щас стало модно называть index.css вместо style.css ?

Ничего Себе!

Первый :)