01:36 Окружение и разметка 03:32 Стили для основы 06:06 Переменные на Sass 09:19 Переменные на PostCSS 14:15 Фолбеки для переменных 16:20 Переопределение свойств 19:46 Переменные и свойства 22:27 Выводы и советы
Есть еще одна важная фишка кастомных свойств: возможность задавать произвольное значение через js и динамически менять его. У нас в чатике владелец сайта может задать произвольный цвет «темы», и, вместо того, чтобы раскладывать по всем зависимым компонентам инлайн-стили с нужным цветом, мы просто меняем значение переменной, а дальше все зависимые компоненты используют эту переменную. Ну и, конечно, это работает динамически: поменял цвет в настройках - виджет сразу перекрасился.
Вот посмотрел видео и только хотел про это написать - и прям с языка снял))) Вадиму респект и уважуха за контент и особенно за его очень понятную подачу!!!
Главное, делаеть такие штуки, что бы не было мигания, как на старых сайтах, когда меняешь тему сайта, обновляешь страницу, а сайт сначала мигнул белым, а потом уже темным (это если говорить в общем, не думаю, что такая проблема может быть в случае чатика)
Даже больше. Оно работает не в одном направлении (js -> css). Оно также может работает и в обратном направлении (css -> js). То есть, css переменые можно устанавливать внутри css, их там в зависимости ок media и любых других условий можно менять (как и обычные свойства). Но разумеется, когда ее получаешь, то в js берется правильное значение. Таким образом можно реально cделать "custom-properties". Например, может быть какой-то компонент, что рендерится динамически, и при каких-то условиях в css устанавливать, например, --fullScreen: 1, а в js при рендере учитывать это свойства. И это так забавно и необычно выглядит. Еще бы возможность отслеживать их изменения из js (как сейчас можно отслеживать изменения media), было бы вообще круто (вроде не встречал, что сейчас можно), но в некоторых случаях это в общем и не нужно.
Полезное использование кастомных свойств - это темы на сайте. Один раз прописали цвета, один класс и вешаем его через JS для изменения всей расцветки(например, ночная тема).
Может в следующем видео расскажешь о работе с кастомными свойствами: ограничения, переопределение их в js, вычисления и тд Видео в целом хорошее, но дальше теории оно не ушло увы. Покажи "фишечки" использования кастомных свойств, покажи то что можно сделать только с помощью них. Спасибо
Я для вас 20 минут кодил, а вы только теорию увидели. Ну ладно. Тут просто задача была не фишечки показать, а объяснить разницу между разными «переменными» - я её заявил в начале и выполнил. Когда будет задача углубиться в кастомные свойства (вы её заказали сейчас) - будут фишечки.
Важная особенность кастомных свойств в том, что их значения можно менять на лету на странице, чего не сделаешь с уже собранными из SCSS. При этом, с помощью переменных в SCSS можно задавать сложные математические операции и выставлять логические условия, чего не сделаешь через кастомные свойства. Я к тому, что это все-таки не вкусовщина и просто так расслабиться не получится. Скорее нужно под задачу выбирать инструмент.
Ну я больше про простые переменные и задачи, которые препроцессоры решают лучше. А для кастомных свойств оставить свои специальные задачи и не делать вид, что их можно фолбечить для IE11.
Благодарю за видео и расширенное понимание, кастомных css свойств. Использовать не приходилось, так как пользуюсь SCSS и отчасти понимал, что в css эти свойства - не просто переменные. А теперь понимаю, что кое где они мне прям нужны! Спасибо. Вот у меня вопрос в отношении стилизации задизейбленной опции в селекте (select > option[disabled]). Почему она поддаётся стилизации только при наличии пустого атрибута value (value=“”)? Без атрибута и с непустым значением стили не применяются...
Я бы на вашем месте просто оставил бы стилизацию внутренностей селекта. Надёжно, удачно и кроссбраузерно всё равно не получится. Пусть будет нормалный системный.
А какой есть вариант использовать нативные «Кастомные свойства», если хочется использовать их в медиазапросах? Одновременно использовать и препроцессор, и «кастомные свойства»? Или есть вариант получше?
Кастомные свойства - это свойства, они могут быть назначены на элементы и оттуда наследоваться по дереву. Так что тут можно только добавить на верхнем уровне переменные (Sass или PostCSS), которые будут раздавать значения для кастомных свойств и использоваться в медиавыражениях. В postcss-preset-env есть трансформация для custom-media, посмотрите там тоже, может подойдёт. github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
Если я правильно понял, тут стоит выбор либо использовать кастомные переменные, если разработка идет под новые браузеры, либо если нужно поддерживать также старые браузеры но вид должен внешний быть в старых и новых браузерах одинаковый, то берем SCSS ₴wow-such-color: moccasin; и забыли про эти кастомные переменные? Или все-таки есть возможность писать код с использованием кастомных переменных с их переопределением не на глобальном уровне и при этом был какой-то полифилл или плагин, который генерирует отдельный css стили для браузеров (как раньше подключался отдельно для IE) которые не поддерживают кастомные переменные?
Адекватных решение по воссозданию поведения кастомных свойств в старых браузерах просто нет. JS-полифилы, которые вам это обещают, я за адекватные решения не считаю.
В твиттер-треде проблема-то и была описана довольно чётко: люди хотели бы использовать пользовательские свойства, но их тянет назад необходимость поддерживать что-то старое. Нас столько лет учили, что элегантная деградация дизайна это хорошо, что просто так взять и не использовать пользовательские свойства было бы странно. Если коротко, люди, которым просто нужны переменные для темизации, например, будут продолжать использовать пользовательский свойства как простые переменные. Возможно, мы даже увидим, не знаю, реализацию режима для слабовидящих для государственных сайтов на них. В этом нет ничего плохого.
Я не очень понимаю, зачем людям «хотеть использовать», если не позволяет браузерная поддержка. Это как гриды в IE11 без автоматической раскладки и без гэпов - проще на флексах. А в случае с кастомными свойствами, ещё и путаница и куча ограничений. Если глядя на код, вы не можете сказать, как он работает - это плохой код. Плюс он бессмысленно раздувается - ведь и для новых браузеров достаточно фолбэков, при таком использовании.
@@pepelsbey я помню тот спор про гриды между Рейчел Эндрю и представителями PostCSS, сейчас ровно такая же ситуация, только гораздо более сглаженная. Мир снова поделится на тех, кто хочет брать максимум от технологии и тех, кому просто нужно "вывести колонку на две строчки". Пользовательские свойства уже бесплатно принесли не-моргающие-темы внутри одного CSS-файла, я всё так же не вижу особой причины отговаривать людей от использования свойств в качестве переменных: эти разработчики получили ровно то, что хотели. Как и ранее - с гридами.
@@pepelsbey Потому что custom properties в связке с javascript хорошо решают задачу темизации в рантайме без генерации отдельных файлов для каждой темы. Ограничения можно прописать через stylelint. Если custom properties с fallback помогают решить какую-то задачу, то почему не использовать их, это всего лишь плюс один инструмент. А когда можно отказаться будет от старых браузеров, тогда можно использовать на полную мощь. Но к примеру задачу темизации даже в современных браузерах нельзя решить пока не будет color functions. Вот пример как это может выглядеть github.com/umputun/remark42/pull/599, плюс плагин для stylelint github.com/Mavrin/stylelint-declaration-use-css-custom-properties
А тебя не смущает, что когда переменные используются плоско и с фолбэком, в коде есть дублирующие кастомные свойства, которые ничего не делают? И тут не помогут оптимизаторы, они-то не знают, как плоско ты их используешь.
Если ты о размере кода, то gzip в легкую с таким справляется. Да, когда смотрю в девтулс есть осадочек, но это как с префиксами. Вообще возможность такого фолбэка показывает крутость сss.
Вадим, а уточните, пожалуйста, про ваш пример с `.card-set--green/blue`. У нас есть отдельный блок `card-set`, есть отдельный блок `card`. По вашему примеру получается неявная связь между двумя независимыми блоками. Почему-то блок `card-set` внезапно узнает, что внутри карточки есть какие-то `fill`, `animal` и т.д., хотя его дело - только построить сетку для набора элементов, а что у элемента внутри ему всё равно. Или в данном случае это просто в угоду демонстрирования функционала и придираться не стоит?
100% БЭМа не бывает - цвет текста всё равно наследуется вглубь, как и размер шрифта. С этим ничего не поделаешь и этим можно пользоваться. Если ради кристалльно чистого БЭМа вы не используете кастомные свойства - это печально. Или вы видите, как это можно совместить?
@@pepelsbey по идее, можно перенести модификаторы цвета на саму карточку. В голом html, конечно, ручками утомишься раздавать модификаторы, но если используется шаблонизатор или фреймворк, то это упрощает задачу.
Но вы же без проблем задаёте для body (или какой у вас там корневой элемент) что-то вроде font-family, color или что-нибудь ещё. Вряд ли вы в каждом блоке пишете font-family для полной независимости. А если пишете, то очень зря. Тут то же самое - свойства наследуются, это суть работы стилей в браузере и не пользоваться этим будет странно, слишком уж мощный инструмент.
Вадим, а как в CSS обстоят дела с манипуляцией цвета? Дело в том, что переписывая элементарную страничку на SASS я столкнулся с проблемой, что не могу сделать цвет (который задан кастомным свойством), скажем, на 20% более прозрачным или темнее. У sass к примеру есть отличные методы rgba, lighten, darken итд. cssnext когда-то предлагал функцию color(), которая вроде как была в в спецификациях будущего и справлялась с такими задачами (например: color( black, a(20%) )), но потом ее потом переименовали в color-mod(), а потом и вообще убрали из CSSWG. Уж очень нравится твоя идеи использовать только стандартизированные решения, но CSS не справляется даже с такой элементарной задачей. Хотелось бы видеть что-то в духе color( --link-color, a(20%) ), но увы, ничего подобного не нашел. Может я чего-то упускаю и решение проблемы есть?
Не знаю, использую --var и вообще не парюсь с тем, что надо дополнительно что-то устанавливать, прописывать, компилировать и делать другие лишние действия, если по итогу все равно браузер скушает css, а не лесс, сасс и пост. Так же как и не вижу смысла юзать typescript и аналоги. Лучше все уметь делать на максимально нативном коде и никогда не будет проблем.
спасибо, дядь. ну и еще, это же можно сложить в комбо и писать со своими привычными переменными sass/less... и юзать еще и новую штуку для более ухищренных штук?
@@pepelsbey А почему эти карточки не в списке?) Вроде бы логично их обернуть в неупорядоченный список, нет? Да, я понимаю, что видео не об этом, но просто мои представления о правильной разметке рушатся)
Да, очень привлекают кастомные свойства, так как в 99.99% использую scss только для переменных и для удобной работы с бэмом &__, &-- . Вот добавили бы в css такую возможность, для работы с БЭМ, то никогда бы и не использовал препроцессоры
Согласен, ещё б точки с запятой и фигурные скобки бы выпилили из CSS - мечта! Боюсь что сейчас будут шуточки что такой синтакцисс называться будет ASS 😂️
Я не использую препроцессор для склейки имён классов по БЕМ. Так глобальный поиск сразу нужные стили находит. А если разбивать то приходится листать и в скобках потеряться можно
@@dampadorje Тоже не понимаю смысл это этого амперсанда, сидеть искать переменную, в то время когда к ней можно просто перейти по клику или через ctrl+f найти за секунду
Странно что это вызывает вопросы у народа, повально забивают на чтение документации? И мне кажется что css переменные можно использовать и в контексте с препроцессорами если опять таки взглянуть на это под правильным углом. Канал классный, лектор зачетный, хиповая футболка)
Вадим и в целом сообщество, как делать таблицы с большим количеством данных с фиксированной шапкой и колонками? для меня это каждый раз боль, но мы вынуждены использовать это повсеместно. хочется нативную вирутуалиазацию с динамической высотой строки, не знаю правда насколько это реально, но в любом случае интересно как решаете этот трабл Вы
Вадим, было бы очень интересно посмотреть видео где ты рассказываешь о rem, em, px. Не считаешь ли ты что проблем от использования rem и em больше чем пользы. Спасибо.
Думаю попробовать custom properties на живом сайте, а для IE задействовать полифил: github.com/nuxodin/ie11CustomProperties. Вроде и наследование и каскад должны с ним работать. Согласен, нет смысла использовать лишь синтаксис без функционала.
Использовать JS-полифил на старом браузере, который скорее всего стоит на старом железе, только ради вашего удобства - это преступление против пользователей.
Почему вместо? Article - это единица информации, то что можно как-то выделить и назвать заголовком. Самое то для карточки товара, тизера статьи или вроде того. Меня как раз смущает заголовок прямо в списке. Сюда можно было бы добавить список, ведь это перечисление подобных элементов. Но я не стал, это не кажется очень критичным.
Нет, это распространённая ошибка среди русскоязычных фронтендеров: все переводят article как «статья», хотя это всего лишь одно значение этого слова. Другое - единица (информации), см. слово «артикул».
@@SuhushinAS Только если статику генерировать. С переменными css можно взаимодействовать из js. Можно применять их внутри css функций типа calc(), и менять их, скажем, в медиа-запросе без необходимости задавать элементу свойство со значением calc заново. Очень мощная штука, если она нужна.
Спасибо, отличное видео, но есть один нюанс ua-cam.com/video/nbN22yqEgM0/v-deo.html - не надо было полностью удалять модификаторы, т.к. фон у .card-set будет работать в старых браузерах
Чтобы пользоваться кастомными свойствами надо просто начать их использовать, а дальше уже научишься использовать их на всю мощь. Так что я за то, что, пусть сначала будут попытки использовать кастомные свойства как переменные.
Полностью согласен. Но с небольшим нюансом: нужно понимать, что происходит. То есть я даже готов сказать следующее: можно вообще всё, если ты понимаешь, зачем это, как оно работает и твой выбор осознанный. Это видео скорее было обращено к тем, кто решил писать современный CSS и просто перешёл с одних переменных на другие.
Знаю, пробовал для простоты, но там есть нюансы. Например, пакет postcss-cli ставится как postcss, а плагин postcss-custom-properties сам не запускается, но указывается параметром для postcss, а npx про него ничего не знает. Так что проще (и быстрее для запуска) было установить всё нужное.
01:36 Окружение и разметка
03:32 Стили для основы
06:06 Переменные на Sass
09:19 Переменные на PostCSS
14:15 Фолбеки для переменных
16:20 Переопределение свойств
19:46 Переменные и свойства
22:27 Выводы и советы
Видосы Вадима - наркотик в чистом виде. Спасибо, что живой.
половину видео поражался названию цветов))
Вадим, спасибо за новое видео. Как всегда - доступно объяснили. Не пропадайте пожалуйста.
Есть еще одна важная фишка кастомных свойств: возможность задавать произвольное значение через js и динамически менять его. У нас в чатике владелец сайта может задать произвольный цвет «темы», и, вместо того, чтобы раскладывать по всем зависимым компонентам инлайн-стили с нужным цветом, мы просто меняем значение переменной, а дальше все зависимые компоненты используют эту переменную. Ну и, конечно, это работает динамически: поменял цвет в настройках - виджет сразу перекрасился.
Вот посмотрел видео и только хотел про это написать - и прям с языка снял)))
Вадиму респект и уважуха за контент и особенно за его очень понятную подачу!!!
Главное, делаеть такие штуки, что бы не было мигания, как на старых сайтах, когда меняешь тему сайта, обновляешь страницу, а сайт сначала мигнул белым, а потом уже темным (это если говорить в общем, не думаю, что такая проблема может быть в случае чатика)
Даже больше. Оно работает не в одном направлении (js -> css). Оно также может работает и в обратном направлении (css -> js). То есть, css переменые можно устанавливать внутри css, их там в зависимости ок media и любых других условий можно менять (как и обычные свойства). Но разумеется, когда ее получаешь, то в js берется правильное значение.
Таким образом можно реально cделать "custom-properties". Например, может быть какой-то компонент, что рендерится динамически, и при каких-то условиях в css устанавливать, например, --fullScreen: 1, а в js при рендере учитывать это свойства. И это так забавно и необычно выглядит.
Еще бы возможность отслеживать их изменения из js (как сейчас можно отслеживать изменения media), было бы вообще круто (вроде не встречал, что сейчас можно), но в некоторых случаях это в общем и не нужно.
Полезное использование кастомных свойств - это темы на сайте. Один раз прописали цвета, один класс и вешаем его через JS для изменения всей расцветки(например, ночная тема).
Вадим, как же не хватает твоих этих роликов.
*шутка про "шел ## день карантина, на ютуб вернулись сss-шорты "
Ютуб настолько очистился…
Вадим, запишите пожалуйста видео о favicon'ках. А то уже какой день парюсь, но не могу разобраться в размерах.
Вадим, спасибо за видео, полезная информация, к размышлению!
спасибо, было интересно
Наконец-то новые, сверх грамотные и сверх полезные видео. Большое человеческое спасибо!
Спасибо! Интересно и доступно, как всегда! ❤️
Огромное спасибо, Вадим! Пишу комментарии категорически редко, но это прекрасное видео!
Боже, Вадим, как же вы круто помогаете! Даже спустя год очень актуально
Дякую за відео! Детально, ретельно, просто чудово пояснили :)
Можно пожалуйста больше видео, от такого приятного человека. Очень не хватает адекватной информации))
прическа отпад)) спасибо за разбор! ждем еще)
Спасибо, Вадим!! Каждое ваше видео как глоток свежего воздуха! 👍🏻👍🏻👍🏻
Спасибо! Познавательное видео. Надо нести в массы то как нужно использовать и для чего предназначена та или иная технология.
Я трижды лайк поставил! Спасибо большое, Вадим!
Лучший канал! Спасибо, Вадим!
Вадим! Спасибо огромное!
спасибо за работу, скучал по твоему годному контенту
Да лаааадно?..))) Дождались)
Ставлю лайк не глядя :)
Тож
Спасибо за возвращение!!!
Годнота подъехала
Лайк
Ты прекрасно объяснил! Благодарю )
Спасибо за видео! Было бы еще здорово про custom elements чего-нибудь =3.
Очень информативно, спасибо!
Вадим, как всегда, просто красавец.
Спасибо, очень интересно и полезно, хочу ещё!
Супер, мне понравилось
Может в следующем видео расскажешь о работе с кастомными свойствами: ограничения, переопределение их в js, вычисления и тд
Видео в целом хорошее, но дальше теории оно не ушло увы. Покажи "фишечки" использования кастомных свойств, покажи то что можно сделать только с помощью них.
Спасибо
Я для вас 20 минут кодил, а вы только теорию увидели. Ну ладно. Тут просто задача была не фишечки показать, а объяснить разницу между разными «переменными» - я её заявил в начале и выполнил. Когда будет задача углубиться в кастомные свойства (вы её заказали сейчас) - будут фишечки.
@@pepelsbey спасибо
Важная особенность кастомных свойств в том, что их значения можно менять на лету на странице, чего не сделаешь с уже собранными из SCSS. При этом, с помощью переменных в SCSS можно задавать сложные математические операции и выставлять логические условия, чего не сделаешь через кастомные свойства. Я к тому, что это все-таки не вкусовщина и просто так расслабиться не получится. Скорее нужно под задачу выбирать инструмент.
Ну я больше про простые переменные и задачи, которые препроцессоры решают лучше. А для кастомных свойств оставить свои специальные задачи и не делать вид, что их можно фолбечить для IE11.
а сейчас поддержка для IE почти никому не нужна, и слава Богу@@pepelsbey
Еееееее! Я так вам рад! \o/
круто, спасибо)
Благодарю за видео и расширенное понимание, кастомных css свойств. Использовать не приходилось, так как пользуюсь SCSS и отчасти понимал, что в css эти свойства - не просто переменные. А теперь понимаю, что кое где они мне прям нужны! Спасибо. Вот у меня вопрос в отношении стилизации задизейбленной опции в селекте (select > option[disabled]). Почему она поддаётся стилизации только при наличии пустого атрибута value (value=“”)? Без атрибута и с непустым значением стили не применяются...
Я бы на вашем месте просто оставил бы стилизацию внутренностей селекта. Надёжно, удачно и кроссбраузерно всё равно не получится. Пусть будет нормалный системный.
Вот так понятнее, я теперь товарищам буду это видео показывать. А то тенденция использовать технологии ради технологий последнее время повсеместна!
Последнее время?)) Уже лет пять-шесть как есть такой тренд. Ломать то что работает потому что есть что-то новое.
@@dmitrygum это зависит от возраста :) для меня лет 5 это последнее время :)
Спасибо за классный разбор. Еще можно было упомянуть, что к css переменным удобно обращаться через js
Спасибо за видос, полезно
Ещё не посмотрел, но лайк уже поставил
Спасибо огромное!
А какой есть вариант использовать нативные «Кастомные свойства», если хочется использовать их в медиазапросах? Одновременно использовать и препроцессор, и «кастомные свойства»? Или есть вариант получше?
Кастомные свойства - это свойства, они могут быть назначены на элементы и оттуда наследоваться по дереву. Так что тут можно только добавить на верхнем уровне переменные (Sass или PostCSS), которые будут раздавать значения для кастомных свойств и использоваться в медиавыражениях. В postcss-preset-env есть трансформация для custom-media, посмотрите там тоже, может подойдёт.
github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
Если я правильно понял, тут стоит выбор либо использовать кастомные переменные, если разработка идет под новые браузеры, либо если нужно поддерживать также старые браузеры но вид должен внешний быть в старых и новых браузерах одинаковый, то берем SCSS ₴wow-such-color: moccasin; и забыли про эти кастомные переменные?
Или все-таки есть возможность писать код с использованием кастомных переменных с их переопределением не на глобальном уровне и при этом был какой-то полифилл или плагин, который генерирует отдельный css стили для браузеров (как раньше подключался отдельно для IE) которые не поддерживают кастомные переменные?
Адекватных решение по воссозданию поведения кастомных свойств в старых браузерах просто нет. JS-полифилы, которые вам это обещают, я за адекватные решения не считаю.
Вадим, новая прическа огонь!
Очень интересная тема, но не раскрыта тема когда же все-таки применять эти 3 разные технологии?
В твиттер-треде проблема-то и была описана довольно чётко: люди хотели бы использовать пользовательские свойства, но их тянет назад необходимость поддерживать что-то старое. Нас столько лет учили, что элегантная деградация дизайна это хорошо, что просто так взять и не использовать пользовательские свойства было бы странно.
Если коротко, люди, которым просто нужны переменные для темизации, например, будут продолжать использовать пользовательский свойства как простые переменные. Возможно, мы даже увидим, не знаю, реализацию режима для слабовидящих для государственных сайтов на них. В этом нет ничего плохого.
Я не очень понимаю, зачем людям «хотеть использовать», если не позволяет браузерная поддержка. Это как гриды в IE11 без автоматической раскладки и без гэпов - проще на флексах. А в случае с кастомными свойствами, ещё и путаница и куча ограничений. Если глядя на код, вы не можете сказать, как он работает - это плохой код. Плюс он бессмысленно раздувается - ведь и для новых браузеров достаточно фолбэков, при таком использовании.
@@pepelsbey я помню тот спор про гриды между Рейчел Эндрю и представителями PostCSS, сейчас ровно такая же ситуация, только гораздо более сглаженная. Мир снова поделится на тех, кто хочет брать максимум от технологии и тех, кому просто нужно "вывести колонку на две строчки".
Пользовательские свойства уже бесплатно принесли не-моргающие-темы внутри одного CSS-файла, я всё так же не вижу особой причины отговаривать людей от использования свойств в качестве переменных: эти разработчики получили ровно то, что хотели. Как и ранее - с гридами.
@@pepelsbey Потому что custom properties в связке с javascript хорошо решают задачу темизации в рантайме без генерации отдельных файлов для каждой темы. Ограничения можно прописать через stylelint. Если custom properties с fallback помогают решить какую-то задачу, то почему не использовать их, это всего лишь плюс один инструмент. А когда можно отказаться будет от старых браузеров, тогда можно использовать на полную мощь. Но к примеру задачу темизации даже в современных браузерах нельзя решить пока не будет color functions. Вот пример как это может выглядеть github.com/umputun/remark42/pull/599, плюс плагин для stylelint github.com/Mavrin/stylelint-declaration-use-css-custom-properties
А тебя не смущает, что когда переменные используются плоско и с фолбэком, в коде есть дублирующие кастомные свойства, которые ничего не делают? И тут не помогут оптимизаторы, они-то не знают, как плоско ты их используешь.
Если ты о размере кода, то gzip в легкую с таким справляется. Да, когда смотрю в девтулс есть осадочек, но это как с префиксами. Вообще возможность такого фолбэка показывает крутость сss.
Вадим, а уточните, пожалуйста, про ваш пример с `.card-set--green/blue`.
У нас есть отдельный блок `card-set`, есть отдельный блок `card`. По вашему примеру получается неявная связь между двумя независимыми блоками. Почему-то блок `card-set` внезапно узнает, что внутри карточки есть какие-то `fill`, `animal` и т.д., хотя его дело - только построить сетку для набора элементов, а что у элемента внутри ему всё равно.
Или в данном случае это просто в угоду демонстрирования функционала и придираться не стоит?
100% БЭМа не бывает - цвет текста всё равно наследуется вглубь, как и размер шрифта. С этим ничего не поделаешь и этим можно пользоваться. Если ради кристалльно чистого БЭМа вы не используете кастомные свойства - это печально. Или вы видите, как это можно совместить?
@@pepelsbey по идее, можно перенести модификаторы цвета на саму карточку. В голом html, конечно, ручками утомишься раздавать модификаторы, но если используется шаблонизатор или фреймворк, то это упрощает задачу.
Но вы же без проблем задаёте для body (или какой у вас там корневой элемент) что-то вроде font-family, color или что-нибудь ещё. Вряд ли вы в каждом блоке пишете font-family для полной независимости. А если пишете, то очень зря. Тут то же самое - свойства наследуются, это суть работы стилей в браузере и не пользоваться этим будет странно, слишком уж мощный инструмент.
@@pepelsbey всё так, задаём для body font-family и другое. Понял, спасибо за ответы!
Вадим, а как в CSS обстоят дела с манипуляцией цвета? Дело в том, что переписывая элементарную страничку на SASS я столкнулся с проблемой, что не могу сделать цвет (который задан кастомным свойством), скажем, на 20% более прозрачным или темнее. У sass к примеру есть отличные методы rgba, lighten, darken итд.
cssnext когда-то предлагал функцию color(), которая вроде как была в в спецификациях будущего и справлялась с такими задачами (например: color( black, a(20%) )), но потом ее потом переименовали в color-mod(), а потом и вообще убрали из CSSWG. Уж очень нравится твоя идеи использовать только стандартизированные решения, но CSS не справляется даже с такой элементарной задачей.
Хотелось бы видеть что-то в духе color( --link-color, a(20%) ), но увы, ничего подобного не нашел. Может я чего-то упускаю и решение проблемы есть?
Нативно - никак, пока функция color-mod (или как она там называется) только проектируется.
Все доступно и подробно. Вопрос стоит ли использовать кастомные переменные только backround, color?
Нет конечно, используйте их везде, где вам удобно.
Не знаю, использую --var и вообще не парюсь с тем, что надо дополнительно что-то устанавливать, прописывать, компилировать и делать другие лишние действия, если по итогу все равно браузер скушает css, а не лесс, сасс и пост. Так же как и не вижу смысла юзать typescript и аналоги. Лучше все уметь делать на максимально нативном коде и никогда не будет проблем.
Вадим, возвращайся чаще!
Лайк, потом гляну)
спасибо, дядь.
ну и еще, это же можно сложить в комбо и писать со своими привычными переменными sass/less... и юзать еще и новую штуку для более ухищренных штук?
Да легко, главное не перемудрить
почему карточки именно через article? они же не отдельный элемент,а имеют прямое отношение к товарной группе?
здесь потому, что это единица контента, которую можно взять из этой группы и использовать где-нибудь ещё.
@@pepelsbey А почему эти карточки не в списке?) Вроде бы логично их обернуть в неупорядоченный список, нет? Да, я понимаю, что видео не об этом, но просто мои представления о правильной разметке рушатся)
Да, очень привлекают кастомные свойства, так как в 99.99% использую scss только для переменных и для удобной работы с бэмом &__, &-- . Вот добавили бы в css такую возможность, для работы с БЭМ, то никогда бы и не использовал препроцессоры
Согласен, ещё б точки с запятой и фигурные скобки бы выпилили из CSS - мечта!
Боюсь что сейчас будут шуточки что такой синтакцисс называться будет ASS 😂️
Я не использую препроцессор для склейки имён классов по БЕМ. Так глобальный поиск сразу нужные стили находит. А если разбивать то приходится листать и в скобках потеряться можно
@@dampadorje Тоже не понимаю смысл это этого амперсанда, сидеть искать переменную, в то время когда к ней можно просто перейти по клику или через ctrl+f найти за секунду
@@dampadorje да в этом минус препроцессоров. зато пока код пишется все оч удобно))
@@dampadorje а в чем собственно проблема перейти в результирующий файл, полученный из SCSS, и уже там производить поиск?
Странно что это вызывает вопросы у народа, повально забивают на чтение документации? И мне кажется что css переменные можно использовать и в контексте с препроцессорами если опять таки взглянуть на это под правильным углом. Канал классный, лектор зачетный, хиповая футболка)
Вадим и в целом сообщество, как делать таблицы с большим количеством данных с фиксированной шапкой и колонками? для меня это каждый раз боль, но мы вынуждены использовать это повсеместно. хочется нативную вирутуалиазацию с динамической высотой строки, не знаю правда насколько это реально, но в любом случае интересно как решаете этот трабл Вы
Мне эту задачу решать не приходилось, но тут недавно была хорошая статья adrianroselli.com/2020/01/fixed-table-headers.html
Як тема для VS Code називається?
GitHub marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
Вадим, было бы очень интересно посмотреть видео где ты рассказываешь о rem, em, px. Не считаешь ли ты что проблем от использования rem и em больше чем пользы. Спасибо.
Сначала решу для себя, что я об этом думаю - пока не понятно до конца, как раз сейчас вопрос встал для нового сайта «Веб-стандартов».
Думаю попробовать custom properties на живом сайте, а для IE задействовать полифил: github.com/nuxodin/ie11CustomProperties.
Вроде и наследование и каскад должны с ним работать. Согласен, нет смысла использовать лишь синтаксис без функционала.
Использовать JS-полифил на старом браузере, который скорее всего стоит на старом железе, только ради вашего удобства - это преступление против пользователей.
Топ ❤️ ❤️ ❤️
Вадим, спасибо за видео! Скажите пожалуйста, что у вас за тема в VS Code и почему в терминале до сих пор bash$ а не zsh?
Тема GitHub Light, а ценности в zsh никакой не вижу, всё то же самое можно настроить на bash.
Можно не по теме? Насколько оправдано использование здесь article, вместо списка?
Почему вместо? Article - это единица информации, то что можно как-то выделить и назвать заголовком. Самое то для карточки товара, тизера статьи или вроде того. Меня как раз смущает заголовок прямо в списке. Сюда можно было бы добавить список, ведь это перечисление подобных элементов. Но я не стал, это не кажется очень критичным.
@@pepelsbey нет, я не про критичность. Мне казалось, что article по семантике про большие объёмы информации - статья, пост и т.д.
Нет, это распространённая ошибка среди русскоязычных фронтендеров: все переводят article как «статья», хотя это всего лишь одно значение этого слова. Другое - единица (информации), см. слово «артикул».
Получается с фоллбэчиться на ie можно без post-css, сразу на лету указывая через запятую фоллбэк ?
Нет, в IE11 без PostCSS фолбеки не появятся
а есть ли какой-то способ кастомизировать input type=date ?
Пока нет, но есть планы github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ControlUICustomization/explainer.md
Спасибо, полезно) Полезно ли держать в scss переменных подключение custom prop.? Типа ₴brand-color: var(-brand-color);
Честно говоря, не вижу причин. Это какой у вас препроцессор гривны использует для обозначения переменных? :)
А что это за прога с символами эмоджи и прочими на 5:40?
Это встроенный в macOS диалог, открывается по Ctrl Cmd Space
Спасибо за видео. Разделяю твою точку зрения. Что то я так и не смог понять весь этот балаган в твиттере.
А возможно ли в sass использовать css-переменные чтоб и в IE11 заработало? Судя по всему, fallback в виде второго значения для var() не срабатывает
Чисто синтаксически, Sass работает с кастомными свойствами, но зависит от того, как именно вы их хотите заставить работать в IE11.
Спасибо за видео.
Кто-то смотрит статистику посещения сайта? Зачем поддерживать ie11?)
У Оли из подкаста «Веб-стандарты» 6% IE11 на проекте, тут просто не отмахнёшься (
я помню, что уже спрашивали на стриме, но не нашел с ходу. Что за редактор?
VS Code, шрифт JetBrains Mono, тема GitHub Light
жаль, что редко про вёрстку рассказываешь...
Будет чаще!
А что у вас за шрифт в vscode?
JetBrains Mono
post.css - огонь!))
ну, мое мнение по поводу переменных в css особо не поменялось... пока остаюсь на less... спасибо за видео)))
В Less гораздо больше возможностей.
@@SuhushinAS Только если статику генерировать. С переменными css можно взаимодействовать из js. Можно применять их внутри css функций типа calc(), и менять их, скажем, в медиа-запросе без необходимости задавать элементу свойство со значением calc заново. Очень мощная штука, если она нужна.
Надо было писать в pre.css и компилировать в post.css :)
Спасибо, отличное видео, но есть один нюанс
ua-cam.com/video/nbN22yqEgM0/v-deo.html - не надо было полностью удалять модификаторы, т.к. фон у .card-set будет работать в старых браузерах
Согласен, увлёкся немного, но фон там был не главным
Хорошо что я перед комментированием гляжу отписали ли об этом другие.
Чтобы пользоваться кастомными свойствами надо просто начать их использовать, а дальше уже научишься использовать их на всю мощь. Так что я за то, что, пусть сначала будут попытки использовать кастомные свойства как переменные.
Полностью согласен. Но с небольшим нюансом: нужно понимать, что происходит. То есть я даже готов сказать следующее: можно вообще всё, если ты понимаешь, зачем это, как оно работает и твой выбор осознанный. Это видео скорее было обращено к тем, кто решил писать современный CSS и просто перешёл с одних переменных на другие.
IE 11 мертв, поэтому уже можно использовать переменные CSS.
Футболка в этот раз не понравилась, когда псевдорукописный шрифт повторяется (2 буквы S), это сразу бросается в глаза. Само видео огонь.
Извините, найду футболку получше!
Ты на память все цвета знаешь?
С десяток помню, остальное - монтаж :D
@@pepelsbey you 🤘
Лайк
а что, щас стало модно называть index.css вместо style.css ?
Считайте, что я придумал :) Ну а чего: index.html давно с нами, index.js появился для Node.js, пришла очередь index.css
С CSS-переменными есть один неприятный кейс - они не работают в медиа-запросах :(
Да, потому, что это кастомные свойства - а свойства применяются к элементам в селекторах.
А ты знаешь, что ты можешь запускать пакеты через npx и при этом не устанавливать их? :)
Знаю, пробовал для простоты, но там есть нюансы. Например, пакет postcss-cli ставится как postcss, а плагин postcss-custom-properties сам не запускается, но указывается параметром для postcss, а npx про него ничего не знает. Так что проще (и быстрее для запуска) было установить всё нужное.
Вадим, слишком близко =)
Привыйкайте, теперь будет так :) Студия небольшая, а объектив шире 15мм уже ставить не стоит.
@@pepelsbey надо минимум 1,5 метра от камеры, социальное дистанцирование же
Смотрел и думал: а цвета из головы или из шпоргалки? Хочу думать что из головы! не переубеждайте меня пожалуйста. :-)
Из головы конечно! (не переубеждаю)
всегда думал что autoprefixer и есть post css.
PostCSS это как Gulp - система запуска плагинов, автопрефиксер один из них
Ничего Себе!
Первый :)
Спасибо!)