⚡️ Эта новинка CSS уничтожила SCSS
HTML-код
- Опубликовано: 5 июл 2024
- 🔥 8 апреля стартует базовый курс по вёрстке сайтов. Скидка 30% на любой тариф: frontendblok.com/courses/html...
✅ Подробный план обучения: docs.google.com/spreadsheets/...
-----
В CSS появилась возможность писать вложенности. Возможно ли, что данная новинка потеснит SCSS и другие CSS-препроцессоры? Ответ узнаете в видео.
Таймкоды:
00:00 Вступление
00:08 Переменные CSS
00:35 Знакомство
01:12 Сравнение SCSS и CSS
02:31 Скидка на курс по верстке
03:30 Вложенность SCSS и CSS
05:07 Селектор наследования
05:29 Зачем писать знак &
08:33 Что можно вложить?
08:45 Что показывает Dev Tools?
09:25 Медиа-запросы
10:34 Разные стили для одного селектора
12:14 Смена порядка записи
13:39 Родитель во вложенности
14:46 БЭМ в SCSS и CSS
16:10 Странности
16:49 Селектор :not()
17:29 Поддержка
18:08 Заменит ли CSS полностью SCSS?
🔵 Telegram - t.me/frontendblok
🔵 Чат Telegram - t.me/frontendblokchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔴 Обучение - frontendblok.com Развлечения
Важное уточнение. В видео я сказала, что БЭМ реализовать в CSS нельзя, но это не так. Вот запись, которая способна это сделать:
.main {
[class*="__title"] {
font-size: 50px;
line-height: 1.5;
}
}
Более того, разными написанием можно добиться разного. С ковычками и без, вместо звездочки ставить ~ | ^ $. Таким образом можно уточнять, что в атрибуте нам нужно - начало, конец, с пробелом, с тире и так далее. Вроде как специфичность та же, что и у обычных классов.
Но это костыль) это не реализация БЭМ) очень громкий заголовок) зачем так?)) не забываем, что scss это компилируется, в нем можно хранить кучу настроек, которые не обязательно должны попасть в на клиент, что не скажешь про css
Ммм,как же удобно
Ну это конечно интересные и полезные изменения, но все же пока еще очень рано говорить о замене препроцессоров обычным css, а потому продолжаем работать на scss и дальше..
Если есть анна блок то где то должна быть анна флекс
хорош
Э.Суровый
раунд!
Анна Грид
Анна Инлайн
Это конечно круто , но как же mixing, function, ….
По мне вложенности в css какие то кривые
Препроцессор дает более удобный синтаксис и доп. возможности.
Анна, спасибо за наглядные примеры в обзоре новых фишек css!
Полумна Лавгуд как всегда всё очень четко раскидала в своем видео, лайк 👍
Уже несколько лет совершенно не заморачиваюсь всефозможными препроцессорами и фреймворками, поскольку, при определённых навыках, они только отвлекают. А здесь автор описал вполне приятные дополнения. Анна умничка!
Если человек юзает scss только ради вложенности, то мне его жаль. Такой разраб не в курсе о всех возможностях препроцессора, которых в css и близко пока нет😂
Так можно сказать о чем угодно, комментарий для самоутверждения.
Уничижительный тон, ты что в семье деревенских алкашей родился? Каким образом ты относишься к такой теме, как в этом ролике? Ты общался с кем либо в Сан-Хосе? Там так говорят с кем либо? Дикарь.
Каких например?
@@ukrainetoday960 Миксины, расширения (extend) это как минимум. Там много чего есть.
@@ukrainetoday960к примеру функция которая перегоняет из px в rem
Спасибо за подробный разбор. Я где то уже видел такое, но так и не понял для чего он, а тут все наглядно!
Офигеть! Спасибо! Лайк! Познавательно!
...поживём, увидим. Лайк за труды :)
Годно 👍
Спасибо Анна за полезный контент
Спасибо, снова узнал что-то новое)
Вложенность в CSS - это очень хорошо, этого реально не хватало. Но лично для меня так же важна возможность разбиения кода на кучу мелких файлов с последующей сборкой в один файл стиля (ну и миксины с экстендами тоже). На простеньком проекте можно и на чистом CSS все сделать сразу в одном файле, но в большинстве случаев файл разрастается более чем в 10000 строк, и такую простыню неудобно поддерживать. При этом, к сожалению импорт в чистом CSS эквивалентен просто подключению кучи css-файлов в хеде, что не хорошо для оптимизации.
Я тоже удивилась, когда реально вложенный @media сработал, как надо. В целом да, есть еще много не достающих тем из SCSS, но то, что уже добавлено в CSS - они будто и вдохновляются тем, что было хорошего в SCSS.
а как же плагины для сборки? Разделяешь на несколько css файлов и все собирается в один css
В принципе это очень полезно для новичков,которые в будущем уже будут переходить на препроцессор )Так сказать c самого начала привыкать к похожему синтаксису.
Полезное видео
Кайф, спс
Прекрасно.
О, чекбоксы хочу стилизовать. Спрашивал у чат gpt, но он дал нерабочий код. А гуглить было лень :)
Старая версия css больше не будет работать? То есть на старых сайтах вёрстка посыпется?
Всё работает и продолжить работать, как и раньше
спасибо за видео! но пока не везде поддерживается? а будет везде?
Будет везде, кроме IE разумеется
да это хорошо в некоторых случаях я не использую все привелегий scss я делаю верстку для движков и зачастую когда делается вывод тех или иных элиментов приходится вносить правки а так мне кажется это упрощает. я знаю что scss можно разбивать на множество фаилов и сжимать конечный результат но когда делаются правки или изменения на движке не удобно
Все удобно, если использовать удобные инструменты для сборки. Например live sass
@@neveren2011 я извиняюсь но каким образом стилизовать допустим выводы minishop плагина на modx и если хостинг без доступа по ssh ?
@@neveren2011 jiop
А как с поддержкой браузерами?
Смотрю на эти новые фичи... Паника! 😰 Всё! Нужно переучиваться, всё по-новому делать! 😓😭
Смотрю на поддержку этих фич... Ой, в ж*у! 😁 Можно ещё 5 лет сидеть и не бзд*ть на SCSS 😅 А там уж и глянем: чё у них из всего этого в итоге получится, и как они это реально внедрят в массы 😁👌
Нет, ну я вот потихоньку как-то понял и проникся "CSS Variables (Custom Properties)" вместо SCSS переменных. Ну окээй! Действительно и поддержка норм и по функционалу ок и удобненько можно из JS взаимодействовать с ними... 😎👌
А эти все ваши новомодные цацки я пожалуй ещё посмотрю, но не буду сильно рассчитывать на них 😅
CSS переменные и sass/scss это нечто разное. И сравнивать некорректно.
@@webs3787, ещё как корректно сравнивать. Это элементы кода, которые выполняют одну и ту же функцию. Они в проекте взаимозаменяемы, но работают, конечно, совершенно по разному. И важно понимать, чем именно они отличаются и как работают. И, вместе с тем, конечно же, они даже не обязательно должны одни заменять другие. Они вполне могут дополнять друг друга в одном проекте, если не получится из-за этого путаницы в стиле оформления кодовой базы 🤔
Так и не понял зачем все это юзать, если и по старинке все работает и без всяких выкрутасов, проще пишется и делается, как по мне
Из того, что я вижу, селектор наследования работает точно так же, как и в SCSS, и каждый раз его ставить точно не надо. А так нововведение, конечно, хорошее. И, на мой взгляд, CSS ещё очень далеко до SCSS в плане возможностей и удобства.
Ставить стоит тем, кто пока не привык, а если уже есть опыт в SCSS, то да - понимание, где его ставить, а где нет уже понятно сразу.
Вы использовали :has в верстке, а где можно узнать об этом больше
в интернете
Набери в браузере "Дока", там и не только про has узнаешь)
В смысле в CSS появились переменные? Мы их использовали как нововведение в годочке 2016-м, если мне память не изменят. 8 лет как ни как прошло.
2016 у них была еще слабая поддержка, их много лет на реальных проектах не использовали, так как старались поддерживать IE. Сейчас такой потребности нет
Ну может в дальнейщем и да, но сейчас без препроцессора скудно
🔥🔥Тёлачка , ты тёлачка новогодняя ёлачка
Балда! не так к ней надо клеится а вот так: О великая h1, между нами огромный margin, но как же быть если охота свой body к вам прикрепить?
Вспомнил, что мне всё время хочется изменить в CSS. Я хотел бы иметь свойство "display" с двумя значениями "yes" и "none", а все остальные значения отдал бы свойству "format". Например: format: flex; format: inlain-block; format: block; format: table; и так далее. Так удобнее с js-ом работать.
ну может тогда не "yes" и "none", а "true" и "false"?
@@user-cr8gq2vo5i Да точно, это правильный вариант!
поехавший
То что мы ставим & при вложенности в случаях, когда используем a:hover, a:has, a.someClass и так далее это логически понятно. И понятно, почему без & это работать не будет (речь идет о том же элементе, а не о вложенном). Поэтому мне не очень понятно, зачем & использовать повсеместно. .someClass1 .someClass2: тут надобности такой нет. .someClass1.someClass2 или a:hover - совсем другое дело. На мой взгляд, это будет только мешать и сбивать с толку, мусорить код.
Теоретически, по бэму, несколько извращенно, можно так:
.main {
[class*="__title"] {
}
бэм гавно
как хочу так и называю классы, и не собираюсь там прогибаться под того, который что-то придумал там.
@@ant3413…
@@ant3413ты уже прогнулся используя браузеры и css
Спасибо за уточнение! Действительно сработало, как надо:
.main {
[class*="__title"] {
font-size: 50px;
line-height: 1.5;
&._s {
font-size: 35px;
}
&._m {
font-size: 45px;
}
}
}
@@ant3413у тебя наверное большой опыт коммерческой разработки 😂
Как выглядеть как вы, будто вам всегда 16😊
В scss есть модульность. Только ради этого я от него не откажусь.
Вы рассуждаете так, будто CSS и SCSS это похожие, но сильно разные вещи.
8:28 заведомо писать то, что можно не писать. Зачем к этому привыкать? Если обратить внимание на наличие пробела, то понимание придет само. И писать это бессмысленно, тем более привыкать к этому.
Привыкать надо только новичкам, так как у них еще нет понимания, где оно нужно, а где нет. Профи не актуален этот совет.
Ну почему на питоне нет такого как Аня учителя.
"этот символ" называется "ampersand" если что :)
Ну плюс минус пока бесполезно, переменные то тут то там уже какое-то время вижу используют, ну а насчёт вложенности пока недотягивает до SCSS. Даже интересно кто победит - БЭМ или W3C. Да и в целом, не вижу никаких причин отказываться от SCSS в ближайшие 3-5 лет точно, много scss не требует, в популярных редакторах плагины трансляции есть....
По поводу БЭМ пока большинство моих знакомых разрабов считают, что он не нужен. Я в принципе тоже согласен. Более-менее удобно использовать в чистом CSS, но и то не везде и не по всем канонам. Сделать повторяющийся блок на БЭМ (кнопку, куки, блок соцсетей) - это да, но не пихать его в процессе всей верстки. Так же правило все описывать классами, а не именами тегов - на мой взгляд является идиотизмом: что плохого написать селектор header > nav > a вместо длиннющей БЭМ-овской хрени? Я не говорю о том, во что превращается html код с длиннющими названиями классов.
В SCSS я в принципе не вижу необходимости использовать БЭМ. Благодаря вложенности код становится кратким и понятным. Есть попап с кукой - сделал отдельный файлик для него, все прописал, все визуально красиво и понятно, и HTML не загажен всякими ".cookies-block .cookies-bloc_active .cookies-block__link-wrapper".
@@Alex-lw9dp те кто пишут что бэм не нужен аутисты.
Потому что он капец как нужен.
Ты просто берешь блок и ложишься его на новую Страницу.
Если ты не юзает бэм тот начинается каша и полный пздц.
Перенес блок и все полетело.
Бэм это просто как 2+2 усваивается за месяц практики.
@@Alex-lw9dp даю секрет в 2024 ты можешь написать по бэму nav li
Можешь написать nav *.
Можешь написать div span
Но ты должен знать как это делается правильно
@@Alex-lw9dp код не превращается с длиннющее название классов если ты адекватный и юзаешь PUG
@@Alex-lw9dp так же я тебе могу дать задачу при которой ты написав header nav будешь ломать верстку.
И вообще не сможешь написать стили.
Нужно только нормально ковырнуть задачи на которых я натыкался.
Особенно при верстке магазинов с мелкими кнопками и менюшками, в торых лежат другие менюшки.
В scss есть ещё очень много того, чего нет в CSS. Рановато ещё хоронить препроцессоры))
Помимо вложенности я лично активно использую миксины и функции. И без них писать стили для меня это просто дикий неудобняк.
А для тех кто только вложенности использует в scss он может и отказаться от препроцессора.
Я бы подписался если бы вы так не палились что не разбираетесь в том что объясняете. Есть такое слово "подстановка", можно было через нее объяснить и через разворачивание новых правил в старые и было бы в разы проще и понятнее.
что то мне кажется новые фишки css поплывут на некоторых браузерах
14:48 плохая практика. лучше полностью прописывать называние класса по бэму
не согласен с терминологией. "селектор наследования" &- это не селектор наследования. это привязка.
main { &:has(h2)} - это по факту main:has(h2)
ГДЕ ТУТ НАСЛЕДОВАНИЕ?
Термин выдуман не из головы, а из доки w3c "Nesting Selector: the & selector"
@@annblok_webdev Неважно.
@@annblok_webdev Nesting Selector - Селектор вложенности. Вы один раз называете так, другой раз иначе. Эти термины неравнозначны
@@annblok_webdev даже если и подразумевается как наследование, но скорее всего не то которое мы понимаем в классическом виде.
Я стал жирным, потому что сижу целыми днями за компом с кодом и жду видео Аннушки
Не лучший комплимент )
П*здец
как всегда в бочке мёда есть ложка дёгтя...кароч расходимся, БЭМ новыми фичами css не поддерживается
Все норм, но пользоваться этим мы будем лет через 5 так как на более старших версиях браузеров это работать не будет в отличии от scss который просто компилируется в css
мусор , где миксины , где функции?
я на sass свой фреймворк написал,а сss так может?
че прям без джиэса?
@@yurok1991 ну так это sass фраймворк , не js
Слово "потенциально" походу ты пропустил...Это не значит, что SCSS пришел конец...
О великий эксперт, может быть и миксины добавят вскоре?? А функции есть в css
@@vladshiroky кастомные функции?
Ну ты дал
Если добавят миксины то css положит сайт.
Дублирование в scss на самом деле не очень хорошая идея, так как смешиваются два принципа - вложенности в родитель и модификации родителя. Например { &.accent:red; } означает класс у родителя, а на том же уровне синтактической вложенности { &_accent:red; } почему-то вдруг означает селектор потомка. Это просто визуально не верно, плохой дизайн.
Для начинающих прокатит. А так такого понятия нет! Есть OOCSS
Я использую taiwind css нафиг нужен scss
В целом фигня и пока близко не подошли к тому, чтобы заменить scss/sass. И даже те же переменные и вложенности никак не меняют ситуацию
Поч?
Scss тоже мусор тупой.
Только sass по феншую
Зачем так много воды?
не вижу что бы кто то кого то уничтожил, если разработчик пордключал SCSS что бы верстать одностраничку с тремя блоками - это идиот, если разработчик будет писать проект с кучей компонентов и огромной CSS простынью на десятки тысяч строчек, то даже если он и попользовался переменными и вложенностью, он еще больший идиот чем первый
Вложенность это не только для замены scss на css, вложенность это уменьшение веса css файла. Зачем 20 раз повторять в селекторе название блока.
Зачем рассказывать больше половины видео про возможности scss в css ? Как будто про scss видео смотрел... акцента нет на том, что МОЖНО и как это Доступно. Акцент на куче селекторов из scss...
Уж слишком кликбейтное название. Вложенность зло, БЭМ не поддерживается, а уж про math, map, list и т.д. вообще можно промолчать, на этом можно расходиться.
Читайте закреп
Че только не придумают эти чуваки из w3c, вот жилось же нормально без обновлений где то в 2018-2020 годах…
Ладно, буду уходить снова в цсс
Кстати реально вроде тогда все без обновлений было
@@Serehajsss Нововведения были всегда..
Если ты подумал, что эти нововведения уже заменили препроцессоры, то конечно уходи в css )
Сцыт в уши
Два тире, даже для RU говорящей аудитории - не нужно употреблять. Все знают, что это Double Dash или D-Dash или "дабл дэш".
Вложенности на проектах стараемся совсем не использовать.