⚡️ Эта новинка CSS уничтожила SCSS

Рет қаралды 27,270

Күн бұрын

🔥 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

Пікірлер: 138

@annblok_webdev Ай бұрын

Важное уточнение. В видео я сказала, что БЭМ реализовать в CSS нельзя, но это не так. Вот запись, которая способна это сделать: .main { [class*="__title"] { font-size: 50px; line-height: 1.5; } }

@musicfedorov Ай бұрын

Более того, разными написанием можно добиться разного. С ковычками и без, вместо звездочки ставить ~ | ^ $. Таким образом можно уточнять, что в атрибуте нам нужно - начало, конец, с пробелом, с тире и так далее. Вроде как специфичность та же, что и у обычных классов.

@StarkElessar Ай бұрын

Но это костыль) это не реализация БЭМ) очень громкий заголовок) зачем так?)) не забываем, что scss это компилируется, в нем можно хранить кучу настроек, которые не обязательно должны попасть в на клиент, что не скажешь про css

@user-et8es9pp5x Ай бұрын

Ммм,как же удобно

@AntonYatsenkoRU Ай бұрын

Если человек юзает scss только ради вложенности, то мне его жаль. Такой разраб не в курсе о всех возможностях препроцессора, которых в css и близко пока нет😂

@1stOrator Ай бұрын

Уничижительный тон, ты что в семье деревенских алкашей родился? Каким образом ты относишься к такой теме, как в этом ролике? Ты общался с кем либо в Сан-Хосе? Там так говорят с кем либо? Дикарь.

@ukrainetoday960 Ай бұрын

Каких например?

@user-ck5nw5ui9u Ай бұрын

@@ukrainetoday960 Миксины, расширения (extend) это как минимум. Там много чего есть.

@user-mi8ud5uv4d Ай бұрын

Анна, спасибо за наглядные примеры в обзоре новых фишек css!

@mewforest Ай бұрын

Полумна Лавгуд как всегда всё очень четко раскидала в своем видео, лайк 👍

@Serehajsss Ай бұрын

Спасибо за подробный разбор. Я где то уже видел такое, но так и не понял для чего он, а тут все наглядно!

@_Fantom_. Ай бұрын

Ну это конечно интересные и полезные изменения, но все же пока еще очень рано говорить о замене препроцессоров обычным css, а потому продолжаем работать на scss и дальше..

@webs3787 Ай бұрын

Это конечно круто , но как же mixing, function, …. По мне вложенности в css какие то кривые Препроцессор дает более удобный синтаксис и доп. возможности.

@progerlife6690 Ай бұрын

Офигеть! Спасибо! Лайк! Познавательно!

@user-yl8ry3wl9w Ай бұрын

Спасибо Анна за полезный контент

@nikolay_it_master Ай бұрын

...поживём, увидим. Лайк за труды :)

@TheMybabloo Ай бұрын

Если есть анна блок то где то должна быть анна флекс

@yanik-sher Ай бұрын

хорош

@vvv7220 Ай бұрын

Э.Суровый

@vyshnyvetskyy Ай бұрын

раунд!

@faros1142 Ай бұрын

Анна Грид

@logistulugbekovich3898 29 күн бұрын

Анна Инлайн

@thomasbrown5900 28 күн бұрын

Всё в Вас прекрасно :))) 💐💐💐

@virtuoz-ru Ай бұрын

Годно 👍

@Alex-lw9dp Ай бұрын

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

@annblok_webdev Ай бұрын

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

@timkaop113 Ай бұрын

а как же плагины для сборки? Разделяешь на несколько css файлов и все собирается в один css

@souleater4413 Ай бұрын

В принципе это очень полезно для новичков,которые в будущем уже будут переходить на препроцессор )Так сказать c самого начала привыкать к похожему синтаксису.

@user-bn7mg3fs5d 29 күн бұрын

Полезное видео

@omxian408 Ай бұрын

Прекрасно. О, чекбоксы хочу стилизовать. Спрашивал у чат gpt, но он дал нерабочий код. А гуглить было лень :)

@user-pw9zk4hn1q Ай бұрын

Кайф, спс

@Green-ao 21 күн бұрын

спасибо за видео! но пока не везде поддерживается? а будет везде?

@annblok_webdev 21 күн бұрын

Будет везде, кроме IE разумеется

@ONM-Remont Ай бұрын

Старая версия css больше не будет работать? То есть на старых сайтах вёрстка посыпется?

@annblok_webdev Ай бұрын

Всё работает и продолжить работать, как и раньше

@Xrustalleff Ай бұрын

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

@webmechanic-kz Ай бұрын

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

@neveren2011 15 күн бұрын

Все удобно, если использовать удобные инструменты для сборки. Например live sass

@webmechanic-kz 15 күн бұрын

@@neveren2011 я извиняюсь но каким образом стилизовать допустим выводы minishop плагина на modx и если хостинг без доступа по ssh ?

@webmechanic-kz 15 күн бұрын

@@neveren2011 jiop

@user-re1zz4oz2b 24 күн бұрын

Вспомнил, что мне всё время хочется изменить в CSS. Я хотел бы иметь свойство "display" с двумя значениями "yes" и "none", а все остальные значения отдал бы свойству "format". Например: format: flex; format: inlain-block; format: block; format: table; и так далее. Так удобнее с js-ом работать.

@user-cr8gq2vo5i 8 сағат бұрын

ну может тогда не "yes" и "none", а "true" и "false"?

@user-re1zz4oz2b 3 сағат бұрын

@@user-cr8gq2vo5i Да точно, это правильный вариант!

@dmitryn.4506 Ай бұрын

Смотрю на эти новые фичи... Паника! 😰 Всё! Нужно переучиваться, всё по-новому делать! 😓😭 Смотрю на поддержку этих фич... Ой, в ж*у! 😁 Можно ещё 5 лет сидеть и не бзд*ть на SCSS 😅 А там уж и глянем: чё у них из всего этого в итоге получится, и как они это реально внедрят в массы 😁👌 Нет, ну я вот потихоньку как-то понял и проникся "CSS Variables (Custom Properties)" вместо SCSS переменных. Ну окээй! Действительно и поддержка норм и по функционалу ок и удобненько можно из JS взаимодействовать с ними... 😎👌 А эти все ваши новомодные цацки я пожалуй ещё посмотрю, но не буду сильно рассчитывать на них 😅

@webs3787 Ай бұрын

CSS переменные и sass/scss это нечто разное. И сравнивать некорректно.

@dmitryn.4506 Ай бұрын

@@webs3787, ещё как корректно сравнивать. Это элементы кода, которые выполняют одну и ту же функцию. Они в проекте взаимозаменяемы, но работают, конечно, совершенно по разному. И важно понимать, чем именно они отличаются и как работают. И, вместе с тем, конечно же, они даже не обязательно должны одни заменять другие. Они вполне могут дополнять друг друга в одном проекте, если не получится из-за этого путаницы в стиле оформления кодовой базы 🤔

@flaunder007 26 күн бұрын

А как с поддержкой браузерами?

@user-cw4jy2ou4n Ай бұрын

Ну почему на питоне нет такого как Аня учителя.

@musicfedorov Ай бұрын

Теоретически, по бэму, несколько извращенно, можно так: .main { [class*="__title"] { }

@ant3413 Ай бұрын

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

@VazeSage Ай бұрын

@@ant3413…

@via754 Ай бұрын

@@ant3413ты уже прогнулся используя браузеры и css

@annblok_webdev Ай бұрын

Спасибо за уточнение! Действительно сработало, как надо: .main { [class*="__title"] { font-size: 50px; line-height: 1.5; &._s { font-size: 35px; } &._m { font-size: 45px; } } }

@Alice14685 Ай бұрын

@@ant3413у тебя наверное большой опыт коммерческой разработки 😂

@Pilger8 Ай бұрын

То что мы ставим & при вложенности в случаях, когда используем a:hover, a:has, a.someClass и так далее это логически понятно. И понятно, почему без & это работать не будет (речь идет о том же элементе, а не о вложенном). Поэтому мне не очень понятно, зачем & использовать повсеместно. .someClass1 .someClass2: тут надобности такой нет. .someClass1.someClass2 или a:hover - совсем другое дело. На мой взгляд, это будет только мешать и сбивать с толку, мусорить код.

@user-dx2fe3mu5v Ай бұрын

Из того, что я вижу, селектор наследования работает точно так же, как и в SCSS, и каждый раз его ставить точно не надо. А так нововведение, конечно, хорошее. И, на мой взгляд, CSS ещё очень далеко до SCSS в плане возможностей и удобства.

@annblok_webdev Ай бұрын

Ставить стоит тем, кто пока не привык, а если уже есть опыт в SCSS, то да - понимание, где его ставить, а где нет уже понятно сразу.

@antiloop5297 Ай бұрын

Как выглядеть как вы, будто вам всегда 16😊

@ez2387 Ай бұрын

🔥🔥Тёлачка , ты тёлачка новогодняя ёлачка

@Undefined-id1dt 27 күн бұрын

Балда! не так к ней надо клеится а вот так: О великая h1, между нами огромный margin, но как же быть если охота свой body к вам прикрепить?

@PirBogov Ай бұрын

Вы использовали :has в верстке, а где можно узнать об этом больше

@leniumso8578 Ай бұрын

в интернете

@Anatoli-bq1pe Ай бұрын

Набери в браузере "Дока", там и не только про has узнаешь)

@MultiKilimangaro Ай бұрын

"этот символ" называется "ampersand" если что :)

@Andrew_Dreamer13 26 күн бұрын

В scss есть модульность. Только ради этого я от него не откажусь.

@mykolademko2637 20 күн бұрын

В смысле в CSS появились переменные? Мы их использовали как нововведение в годочке 2016-м, если мне память не изменят. 8 лет как ни как прошло.

@annblok_webdev 20 күн бұрын

2016 у них была еще слабая поддержка, их много лет на реальных проектах не использовали, так как старались поддерживать IE. Сейчас такой потребности нет

@neveren2011 15 күн бұрын

Вы рассуждаете так, будто CSS и SCSS это похожие, но сильно разные вещи.

@Anatoli-bq1pe Ай бұрын

Помимо вложенности я лично активно использую миксины и функции. И без них писать стили для меня это просто дикий неудобняк. А для тех кто только вложенности использует в scss он может и отказаться от препроцессора.

@user-ql5on8rk3i Ай бұрын

8:28 заведомо писать то, что можно не писать. Зачем к этому привыкать? Если обратить внимание на наличие пробела, то понимание придет само. И писать это бессмысленно, тем более привыкать к этому.

@annblok_webdev Ай бұрын

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

@alex_green010 Ай бұрын

Ну плюс минус пока бесполезно, переменные то тут то там уже какое-то время вижу используют, ну а насчёт вложенности пока недотягивает до SCSS. Даже интересно кто победит - БЭМ или W3C. Да и в целом, не вижу никаких причин отказываться от SCSS в ближайшие 3-5 лет точно, много scss не требует, в популярных редакторах плагины трансляции есть....

@Alex-lw9dp Ай бұрын

По поводу БЭМ пока большинство моих знакомых разрабов считают, что он не нужен. Я в принципе тоже согласен. Более-менее удобно использовать в чистом CSS, но и то не везде и не по всем канонам. Сделать повторяющийся блок на БЭМ (кнопку, куки, блок соцсетей) - это да, но не пихать его в процессе всей верстки. Так же правило все описывать классами, а не именами тегов - на мой взгляд является идиотизмом: что плохого написать селектор header > nav > a вместо длиннющей БЭМ-овской хрени? Я не говорю о том, во что превращается html код с длиннющими названиями классов. В SCSS я в принципе не вижу необходимости использовать БЭМ. Благодаря вложенности код становится кратким и понятным. Есть попап с кукой - сделал отдельный файлик для него, все прописал, все визуально красиво и понятно, и HTML не загажен всякими ".cookies-block .cookies-bloc_active .cookies-block__link-wrapper".

@WERWOLION Ай бұрын

@@Alex-lw9dp те кто пишут что бэм не нужен аутисты. Потому что он капец как нужен. Ты просто берешь блок и ложишься его на новую Страницу. Если ты не юзает бэм тот начинается каша и полный пздц. Перенес блок и все полетело. Бэм это просто как 2+2 усваивается за месяц практики.

@WERWOLION Ай бұрын

@@Alex-lw9dp даю секрет в 2024 ты можешь написать по бэму nav li Можешь написать nav *. Можешь написать div span Но ты должен знать как это делается правильно

@WERWOLION Ай бұрын

@@Alex-lw9dp код не превращается с длиннющее название классов если ты адекватный и юзаешь PUG

@WERWOLION Ай бұрын

@@Alex-lw9dp так же я тебе могу дать задачу при которой ты написав header nav будешь ломать верстку. И вообще не сможешь написать стили. Нужно только нормально ковырнуть задачи на которых я натыкался. Особенно при верстке магазинов с мелкими кнопками и менюшками, в торых лежат другие менюшки.

@crtve413 29 күн бұрын

Анна вы шыкарная девушка!

@sergeypogorelov7059 Ай бұрын

В scss есть ещё очень много того, чего нет в CSS. Рановато ещё хоронить препроцессоры))

@user-mz2zb9cq9s Ай бұрын

Я бы подписался если бы вы так не палились что не разбираетесь в том что объясняете. Есть такое слово "подстановка", можно было через нее объяснить и через разворачивание новых правил в старые и было бы в разы проще и понятнее.

@Sheepdolly626 Ай бұрын

что то мне кажется новые фишки css поплывут на некоторых браузерах

@olenakunina1 Ай бұрын

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

@user-mi4vf4io7l Ай бұрын

Я использую taiwind css нафиг нужен scss

@user-dd8od2pc2o Ай бұрын

не согласен с терминологией. "селектор наследования" &- это не селектор наследования. это привязка. main { &:has(h2)} - это по факту main:has(h2) ГДЕ ТУТ НАСЛЕДОВАНИЕ?

@annblok_webdev Ай бұрын

Термин выдуман не из головы, а из доки w3c "Nesting Selector: the & selector"

@user-dd8od2pc2o Ай бұрын

@@annblok_webdev Неважно.

@user-dd8od2pc2o Ай бұрын

@@annblok_webdev Nesting Selector - Селектор вложенности. Вы один раз называете так, другой раз иначе. Эти термины неравнозначны

@Maxim9575 Ай бұрын

@@annblok_webdev даже если и подразумевается как наследование, но скорее всего не то которое мы понимаем в классическом виде.

@Burgermangimmy Ай бұрын

Я стал жирным, потому что сижу целыми днями за компом с кодом и жду видео Аннушки

@_Fantom_. Ай бұрын

Не лучший комплимент )

@Maxim9575 Ай бұрын

П*здец

@yatagun Ай бұрын

14:48 плохая практика. лучше полностью прописывать называние класса по бэму

@Ch-ce7ym Ай бұрын

Все норм, но пользоваться этим мы будем лет через 5 так как на более старших версиях браузеров это работать не будет в отличии от scss который просто компилируется в css

@golden_smiles Ай бұрын

Дублирование в scss на самом деле не очень хорошая идея, так как смешиваются два принципа - вложенности в родитель и модификации родителя. Например { &.accent:red; } означает класс у родителя, а на том же уровне синтактической вложенности { &_accent:red; } почему-то вдруг означает селектор потомка. Это просто визуально не верно, плохой дизайн.

@sergeyovsov3417 Ай бұрын

как всегда в бочке мёда есть ложка дёгтя...кароч расходимся, БЭМ новыми фичами css не поддерживается

@2Extremum Ай бұрын

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

@Burgermangimmy Ай бұрын

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

@leniumso8578 Ай бұрын

@@Burgermangimmy нафига смотреть его до конца, если с самого начала бред и самореклама?

@Atractiondj 26 күн бұрын

@@leniumso8578чл*н сосать не код писать, поэтому она и несет ту чушь что несет в ролике

@MSotaRecords Ай бұрын

Для начинающих прокатит. А так такого понятия нет! Есть OOCSS

@WERWOLION Ай бұрын

мусор , где миксины , где функции? я на sass свой фреймворк написал,а сss так может?

@yurok1991 Ай бұрын

че прям без джиэса?

@WERWOLION Ай бұрын

@@yurok1991 ну так это sass фраймворк , не js

@yaroslav5378 Ай бұрын

Слово "потенциально" походу ты пропустил...Это не значит, что SCSS пришел конец...

@vladshiroky Ай бұрын

О великий эксперт, может быть и миксины добавят вскоре?? А функции есть в css

@WERWOLION Ай бұрын

@@vladshiroky кастомные функции? Ну ты дал Если добавят миксины то css положит сайт.

@feedgemer7349 Ай бұрын

В целом фигня и пока близко не подошли к тому, чтобы заменить scss/sass. И даже те же переменные и вложенности никак не меняют ситуацию

@Serehajsss Ай бұрын

Поч?

@WERWOLION Ай бұрын

Scss тоже мусор тупой. Только sass по феншую

@user-Arvard Ай бұрын

Зачем рассказывать больше половины видео про возможности scss в css ? Как будто про scss видео смотрел... акцента нет на том, что МОЖНО и как это Доступно. Акцент на куче селекторов из scss...

@user-vl9te1cg3r 17 күн бұрын

Зачем так много воды?

@ozimnadius Ай бұрын

Уж слишком кликбейтное название. Вложенность зло, БЭМ не поддерживается, а уж про math, map, list и т.д. вообще можно промолчать, на этом можно расходиться.

@annblok_webdev Ай бұрын

Читайте закреп