Тёмный

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

Анна Блок
Подписаться 102 тыс.
Просмотров 28 тыс.
50% 1

🔥 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

Развлечения

Опубликовано:

 

12 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 139   
@annblok_webdev
@annblok_webdev 2 месяца назад
Важное уточнение. В видео я сказала, что БЭМ реализовать в CSS нельзя, но это не так. Вот запись, которая способна это сделать: .main { [class*="__title"] { font-size: 50px; line-height: 1.5; } }
@musicfedorov
@musicfedorov 2 месяца назад
Более того, разными написанием можно добиться разного. С ковычками и без, вместо звездочки ставить ~ | ^ $. Таким образом можно уточнять, что в атрибуте нам нужно - начало, конец, с пробелом, с тире и так далее. Вроде как специфичность та же, что и у обычных классов.
@StarkElessar
@StarkElessar Месяц назад
Но это костыль) это не реализация БЭМ) очень громкий заголовок) зачем так?)) не забываем, что scss это компилируется, в нем можно хранить кучу настроек, которые не обязательно должны попасть в на клиент, что не скажешь про css
@user-et8es9pp5x
@user-et8es9pp5x Месяц назад
Ммм,как же удобно
@webs3787
@webs3787 2 месяца назад
Это конечно круто , но как же mixing, function, …. По мне вложенности в css какие то кривые Препроцессор дает более удобный синтаксис и доп. возможности.
@TheMybabloo
@TheMybabloo 2 месяца назад
Если есть анна блок то где то должна быть анна флекс
@yanik-sher
@yanik-sher 2 месяца назад
хорош
@vvv7220
@vvv7220 Месяц назад
Э.Суровый
@vyshnyvetskyy
@vyshnyvetskyy Месяц назад
раунд!
@faros1142
@faros1142 Месяц назад
Анна Грид
@logistulugbekovich3898
@logistulugbekovich3898 Месяц назад
Анна Инлайн
@_Fantom_.
@_Fantom_. 2 месяца назад
Ну это конечно интересные и полезные изменения, но все же пока еще очень рано говорить о замене препроцессоров обычным css, а потому продолжаем работать на scss и дальше..
@mewforest
@mewforest 2 месяца назад
Полумна Лавгуд как всегда всё очень четко раскидала в своем видео, лайк 👍
@user-mi8ud5uv4d
@user-mi8ud5uv4d 2 месяца назад
Анна, спасибо за наглядные примеры в обзоре новых фишек css!
@AntonYatsenkoRU
@AntonYatsenkoRU 2 месяца назад
Если человек юзает scss только ради вложенности, то мне его жаль. Такой разраб не в курсе о всех возможностях препроцессора, которых в css и близко пока нет😂
@Maxim9575
@Maxim9575 2 месяца назад
Так можно сказать о чем угодно, комментарий для самоутверждения.
@1stOrator
@1stOrator Месяц назад
Уничижительный тон, ты что в семье деревенских алкашей родился? Каким образом ты относишься к такой теме, как в этом ролике? Ты общался с кем либо в Сан-Хосе? Там так говорят с кем либо? Дикарь.
@ukrainetoday960
@ukrainetoday960 Месяц назад
Каких например?
@user-ck5nw5ui9u
@user-ck5nw5ui9u Месяц назад
@@ukrainetoday960 Миксины, расширения (extend) это как минимум. Там много чего есть.
@Serehajsss
@Serehajsss 2 месяца назад
Спасибо за подробный разбор. Я где то уже видел такое, но так и не понял для чего он, а тут все наглядно!
@progerlife6690
@progerlife6690 2 месяца назад
Офигеть! Спасибо! Лайк! Познавательно!
@nikolay_it_master
@nikolay_it_master 2 месяца назад
...поживём, увидим. Лайк за труды :)
@user-yl8ry3wl9w
@user-yl8ry3wl9w 2 месяца назад
Спасибо Анна за полезный контент
@severs71
@severs71 2 месяца назад
Уже несколько лет совершенно не заморачиваюсь всефозможными препроцессорами и фреймворками, поскольку, при определённых навыках, они только отвлекают. А здесь автор описал вполне приятные дополнения. Анна умничка!
@Alex-lw9dp
@Alex-lw9dp 2 месяца назад
Спасибо, снова узнал что-то новое) Вложенность в CSS - это очень хорошо, этого реально не хватало. Но лично для меня так же важна возможность разбиения кода на кучу мелких файлов с последующей сборкой в один файл стиля (ну и миксины с экстендами тоже). На простеньком проекте можно и на чистом CSS все сделать сразу в одном файле, но в большинстве случаев файл разрастается более чем в 10000 строк, и такую простыню неудобно поддерживать. При этом, к сожалению импорт в чистом CSS эквивалентен просто подключению кучи css-файлов в хеде, что не хорошо для оптимизации.
@annblok_webdev
@annblok_webdev 2 месяца назад
Я тоже удивилась, когда реально вложенный @media сработал, как надо. В целом да, есть еще много не достающих тем из SCSS, но то, что уже добавлено в CSS - они будто и вдохновляются тем, что было хорошего в SCSS.
@timkaop113
@timkaop113 2 месяца назад
а как же плагины для сборки? Разделяешь на несколько css файлов и все собирается в один css
@thomasbrown5900
@thomasbrown5900 Месяц назад
Всё в Вас прекрасно :))) 💐💐💐
@souleater4413
@souleater4413 2 месяца назад
В принципе это очень полезно для новичков,которые в будущем уже будут переходить на препроцессор )Так сказать c самого начала привыкать к похожему синтаксису.
@virtuoz-ru
@virtuoz-ru 2 месяца назад
Годно 👍
@ONM-Remont
@ONM-Remont 2 месяца назад
Старая версия css больше не будет работать? То есть на старых сайтах вёрстка посыпется?
@annblok_webdev
@annblok_webdev 2 месяца назад
Всё работает и продолжить работать, как и раньше
@omxian408
@omxian408 2 месяца назад
Прекрасно. О, чекбоксы хочу стилизовать. Спрашивал у чат gpt, но он дал нерабочий код. А гуглить было лень :)
@Green-ao
@Green-ao Месяц назад
спасибо за видео! но пока не везде поддерживается? а будет везде?
@annblok_webdev
@annblok_webdev Месяц назад
Будет везде, кроме IE разумеется
@user-pw9zk4hn1q
@user-pw9zk4hn1q 2 месяца назад
Кайф, спс
@Xrustalleff
@Xrustalleff 2 месяца назад
Так и не понял зачем все это юзать, если и по старинке все работает и без всяких выкрутасов, проще пишется и делается, как по мне
@user-bn7mg3fs5d
@user-bn7mg3fs5d Месяц назад
Полезное видео
@flaunder007
@flaunder007 Месяц назад
А как с поддержкой браузерами?
@webmechanic-kz
@webmechanic-kz 2 месяца назад
да это хорошо в некоторых случаях я не использую все привелегий scss я делаю верстку для движков и зачастую когда делается вывод тех или иных элиментов приходится вносить правки а так мне кажется это упрощает. я знаю что scss можно разбивать на множество фаилов и сжимать конечный результат но когда делаются правки или изменения на движке не удобно
@neveren2011
@neveren2011 Месяц назад
Все удобно, если использовать удобные инструменты для сборки. Например live sass
@webmechanic-kz
@webmechanic-kz Месяц назад
@@neveren2011 я извиняюсь но каким образом стилизовать допустим выводы minishop плагина на modx и если хостинг без доступа по ssh ?
@webmechanic-kz
@webmechanic-kz Месяц назад
@@neveren2011 jiop
@PirBogov
@PirBogov 2 месяца назад
Вы использовали :has в верстке, а где можно узнать об этом больше
@leniumso8578
@leniumso8578 2 месяца назад
в интернете
@Anatoli-bq1pe
@Anatoli-bq1pe Месяц назад
Набери в браузере "Дока", там и не только про has узнаешь)
@Pilger8
@Pilger8 Месяц назад
То что мы ставим & при вложенности в случаях, когда используем a:hover, a:has, a.someClass и так далее это логически понятно. И понятно, почему без & это работать не будет (речь идет о том же элементе, а не о вложенном). Поэтому мне не очень понятно, зачем & использовать повсеместно. .someClass1 .someClass2: тут надобности такой нет. .someClass1.someClass2 или a:hover - совсем другое дело. На мой взгляд, это будет только мешать и сбивать с толку, мусорить код.
@user-dx2fe3mu5v
@user-dx2fe3mu5v 2 месяца назад
Из того, что я вижу, селектор наследования работает точно так же, как и в SCSS, и каждый раз его ставить точно не надо. А так нововведение, конечно, хорошее. И, на мой взгляд, CSS ещё очень далеко до SCSS в плане возможностей и удобства.
@annblok_webdev
@annblok_webdev 2 месяца назад
Ставить стоит тем, кто пока не привык, а если уже есть опыт в SCSS, то да - понимание, где его ставить, а где нет уже понятно сразу.
@dmitryn.4506
@dmitryn.4506 2 месяца назад
Смотрю на эти новые фичи... Паника! 😰 Всё! Нужно переучиваться, всё по-новому делать! 😓😭 Смотрю на поддержку этих фич... Ой, в ж*у! 😁 Можно ещё 5 лет сидеть и не бзд*ть на SCSS 😅 А там уж и глянем: чё у них из всего этого в итоге получится, и как они это реально внедрят в массы 😁👌 Нет, ну я вот потихоньку как-то понял и проникся "CSS Variables (Custom Properties)" вместо SCSS переменных. Ну окээй! Действительно и поддержка норм и по функционалу ок и удобненько можно из JS взаимодействовать с ними... 😎👌 А эти все ваши новомодные цацки я пожалуй ещё посмотрю, но не буду сильно рассчитывать на них 😅
@webs3787
@webs3787 2 месяца назад
CSS переменные и sass/scss это нечто разное. И сравнивать некорректно.
@dmitryn.4506
@dmitryn.4506 2 месяца назад
@@webs3787, ещё как корректно сравнивать. Это элементы кода, которые выполняют одну и ту же функцию. Они в проекте взаимозаменяемы, но работают, конечно, совершенно по разному. И важно понимать, чем именно они отличаются и как работают. И, вместе с тем, конечно же, они даже не обязательно должны одни заменять другие. Они вполне могут дополнять друг друга в одном проекте, если не получится из-за этого путаницы в стиле оформления кодовой базы 🤔
@mykolademko2637
@mykolademko2637 Месяц назад
В смысле в CSS появились переменные? Мы их использовали как нововведение в годочке 2016-м, если мне память не изменят. 8 лет как ни как прошло.
@annblok_webdev
@annblok_webdev Месяц назад
2016 у них была еще слабая поддержка, их много лет на реальных проектах не использовали, так как старались поддерживать IE. Сейчас такой потребности нет
@musicfedorov
@musicfedorov 2 месяца назад
Теоретически, по бэму, несколько извращенно, можно так: .main { [class*="__title"] { }
@ant3413
@ant3413 2 месяца назад
бэм гавно как хочу так и называю классы, и не собираюсь там прогибаться под того, который что-то придумал там.
@VazeSage
@VazeSage 2 месяца назад
@@ant3413…
@via754
@via754 2 месяца назад
@@ant3413ты уже прогнулся используя браузеры и css
@annblok_webdev
@annblok_webdev 2 месяца назад
Спасибо за уточнение! Действительно сработало, как надо: .main { [class*="__title"] { font-size: 50px; line-height: 1.5; &._s { font-size: 35px; } &._m { font-size: 45px; } } }
@Alice14685
@Alice14685 2 месяца назад
​@@ant3413у тебя наверное большой опыт коммерческой разработки 😂
@user-cw4jy2ou4n
@user-cw4jy2ou4n Месяц назад
Ну почему на питоне нет такого как Аня учителя.
@ez2387
@ez2387 2 месяца назад
🔥🔥Тёлачка , ты тёлачка новогодняя ёлачка
@Undefined-id1dt
@Undefined-id1dt Месяц назад
Балда! не так к ней надо клеится а вот так: О великая h1, между нами огромный margin, но как же быть если охота свой body к вам прикрепить?
@antiloop5297
@antiloop5297 2 месяца назад
Как выглядеть как вы, будто вам всегда 16😊
@user-re1zz4oz2b
@user-re1zz4oz2b Месяц назад
Вспомнил, что мне всё время хочется изменить в CSS. Я хотел бы иметь свойство "display" с двумя значениями "yes" и "none", а все остальные значения отдал бы свойству "format". Например: format: flex; format: inlain-block; format: block; format: table; и так далее. Так удобнее с js-ом работать.
@user-cr8gq2vo5i
@user-cr8gq2vo5i 27 дней назад
ну может тогда не "yes" и "none", а "true" и "false"?
@user-re1zz4oz2b
@user-re1zz4oz2b 26 дней назад
@@user-cr8gq2vo5i Да точно, это правильный вариант!
@maximkiselev1554
@maximkiselev1554 2 дня назад
поехавший
@MultiKilimangaro
@MultiKilimangaro 2 месяца назад
"этот символ" называется "ampersand" если что :)
@user-ql5on8rk3i
@user-ql5on8rk3i 2 месяца назад
8:28 заведомо писать то, что можно не писать. Зачем к этому привыкать? Если обратить внимание на наличие пробела, то понимание придет само. И писать это бессмысленно, тем более привыкать к этому.
@annblok_webdev
@annblok_webdev 2 месяца назад
Привыкать надо только новичкам, так как у них еще нет понимания, где оно нужно, а где нет. Профи не актуален этот совет.
@Andrew_Dreamer13
@Andrew_Dreamer13 Месяц назад
В scss есть модульность. Только ради этого я от него не откажусь.
@Anatoli-bq1pe
@Anatoli-bq1pe Месяц назад
Помимо вложенности я лично активно использую миксины и функции. И без них писать стили для меня это просто дикий неудобняк. А для тех кто только вложенности использует в scss он может и отказаться от препроцессора.
@sergeypogorelov7059
@sergeypogorelov7059 2 месяца назад
В scss есть ещё очень много того, чего нет в CSS. Рановато ещё хоронить препроцессоры))
@alex_green010
@alex_green010 2 месяца назад
Ну плюс минус пока бесполезно, переменные то тут то там уже какое-то время вижу используют, ну а насчёт вложенности пока недотягивает до SCSS. Даже интересно кто победит - БЭМ или W3C. Да и в целом, не вижу никаких причин отказываться от SCSS в ближайшие 3-5 лет точно, много scss не требует, в популярных редакторах плагины трансляции есть....
@Alex-lw9dp
@Alex-lw9dp 2 месяца назад
По поводу БЭМ пока большинство моих знакомых разрабов считают, что он не нужен. Я в принципе тоже согласен. Более-менее удобно использовать в чистом CSS, но и то не везде и не по всем канонам. Сделать повторяющийся блок на БЭМ (кнопку, куки, блок соцсетей) - это да, но не пихать его в процессе всей верстки. Так же правило все описывать классами, а не именами тегов - на мой взгляд является идиотизмом: что плохого написать селектор header > nav > a вместо длиннющей БЭМ-овской хрени? Я не говорю о том, во что превращается html код с длиннющими названиями классов. В SCSS я в принципе не вижу необходимости использовать БЭМ. Благодаря вложенности код становится кратким и понятным. Есть попап с кукой - сделал отдельный файлик для него, все прописал, все визуально красиво и понятно, и HTML не загажен всякими ".cookies-block .cookies-bloc_active .cookies-block__link-wrapper".
@WERWOLION
@WERWOLION 2 месяца назад
@@Alex-lw9dp те кто пишут что бэм не нужен аутисты. Потому что он капец как нужен. Ты просто берешь блок и ложишься его на новую Страницу. Если ты не юзает бэм тот начинается каша и полный пздц. Перенес блок и все полетело. Бэм это просто как 2+2 усваивается за месяц практики.
@WERWOLION
@WERWOLION 2 месяца назад
@@Alex-lw9dp даю секрет в 2024 ты можешь написать по бэму nav li Можешь написать nav *. Можешь написать div span Но ты должен знать как это делается правильно
@WERWOLION
@WERWOLION 2 месяца назад
@@Alex-lw9dp код не превращается с длиннющее название классов если ты адекватный и юзаешь PUG
@WERWOLION
@WERWOLION 2 месяца назад
@@Alex-lw9dp так же я тебе могу дать задачу при которой ты написав header nav будешь ломать верстку. И вообще не сможешь написать стили. Нужно только нормально ковырнуть задачи на которых я натыкался. Особенно при верстке магазинов с мелкими кнопками и менюшками, в торых лежат другие менюшки.
@neveren2011
@neveren2011 Месяц назад
Вы рассуждаете так, будто CSS и SCSS это похожие, но сильно разные вещи.
@user-mz2zb9cq9s
@user-mz2zb9cq9s 2 месяца назад
Я бы подписался если бы вы так не палились что не разбираетесь в том что объясняете. Есть такое слово "подстановка", можно было через нее объяснить и через разворачивание новых правил в старые и было бы в разы проще и понятнее.
@Sheepdolly626
@Sheepdolly626 2 месяца назад
что то мне кажется новые фишки css поплывут на некоторых браузерах
@Burgermangimmy
@Burgermangimmy 2 месяца назад
Я стал жирным, потому что сижу целыми днями за компом с кодом и жду видео Аннушки
@_Fantom_.
@_Fantom_. 2 месяца назад
Не лучший комплимент )
@Maxim9575
@Maxim9575 2 месяца назад
П*здец
@user-dd8od2pc2o
@user-dd8od2pc2o 2 месяца назад
не согласен с терминологией. "селектор наследования" &- это не селектор наследования. это привязка. main { &:has(h2)} - это по факту main:has(h2) ГДЕ ТУТ НАСЛЕДОВАНИЕ?
@annblok_webdev
@annblok_webdev 2 месяца назад
Термин выдуман не из головы, а из доки w3c "Nesting Selector: the & selector"
@user-dd8od2pc2o
@user-dd8od2pc2o 2 месяца назад
@@annblok_webdev Неважно.
@user-dd8od2pc2o
@user-dd8od2pc2o 2 месяца назад
@@annblok_webdev Nesting Selector - Селектор вложенности. Вы один раз называете так, другой раз иначе. Эти термины неравнозначны
@Maxim9575
@Maxim9575 2 месяца назад
​@@annblok_webdev даже если и подразумевается как наследование, но скорее всего не то которое мы понимаем в классическом виде.
@yatagun
@yatagun 2 месяца назад
14:48 плохая практика. лучше полностью прописывать называние класса по бэму
@Ch-ce7ym
@Ch-ce7ym 2 месяца назад
Все норм, но пользоваться этим мы будем лет через 5 так как на более старших версиях браузеров это работать не будет в отличии от scss который просто компилируется в css
@WERWOLION
@WERWOLION 2 месяца назад
мусор , где миксины , где функции? я на sass свой фреймворк написал,а сss так может?
@yurok1991
@yurok1991 2 месяца назад
че прям без джиэса?
@WERWOLION
@WERWOLION 2 месяца назад
@@yurok1991 ну так это sass фраймворк , не js
@yaroslav5378
@yaroslav5378 2 месяца назад
Слово "потенциально" походу ты пропустил...Это не значит, что SCSS пришел конец...
@vladshiroky
@vladshiroky 2 месяца назад
О великий эксперт, может быть и миксины добавят вскоре?? А функции есть в css
@WERWOLION
@WERWOLION 2 месяца назад
@@vladshiroky кастомные функции? Ну ты дал Если добавят миксины то css положит сайт.
@sergeyovsov3417
@sergeyovsov3417 2 месяца назад
как всегда в бочке мёда есть ложка дёгтя...кароч расходимся, БЭМ новыми фичами css не поддерживается
@golden_smiles
@golden_smiles 2 месяца назад
Дублирование в scss на самом деле не очень хорошая идея, так как смешиваются два принципа - вложенности в родитель и модификации родителя. Например { &.accent:red; } означает класс у родителя, а на том же уровне синтактической вложенности { &_accent:red; } почему-то вдруг означает селектор потомка. Это просто визуально не верно, плохой дизайн.
@user-mi4vf4io7l
@user-mi4vf4io7l 2 месяца назад
Я использую taiwind css нафиг нужен scss
@MSotaRecords
@MSotaRecords 2 месяца назад
Для начинающих прокатит. А так такого понятия нет! Есть OOCSS
@feedgemer7349
@feedgemer7349 2 месяца назад
В целом фигня и пока близко не подошли к тому, чтобы заменить scss/sass. И даже те же переменные и вложенности никак не меняют ситуацию
@Serehajsss
@Serehajsss 2 месяца назад
Поч?
@WERWOLION
@WERWOLION 2 месяца назад
Scss тоже мусор тупой. Только sass по феншую
@olenakunina1
@olenakunina1 2 месяца назад
не вижу что бы кто то кого то уничтожил, если разработчик пордключал SCSS что бы верстать одностраничку с тремя блоками - это идиот, если разработчик будет писать проект с кучей компонентов и огромной CSS простынью на десятки тысяч строчек, то даже если он и попользовался переменными и вложенностью, он еще больший идиот чем первый
@yurakomarov4382
@yurakomarov4382 2 месяца назад
Вложенность это не только для замены scss на css, вложенность это уменьшение веса css файла. Зачем 20 раз повторять в селекторе название блока.
@user-Arvard
@user-Arvard 2 месяца назад
Зачем рассказывать больше половины видео про возможности scss в css ? Как будто про scss видео смотрел... акцента нет на том, что МОЖНО и как это Доступно. Акцент на куче селекторов из scss...
@user-vl9te1cg3r
@user-vl9te1cg3r Месяц назад
Зачем так много воды?
@ozimnadius
@ozimnadius 2 месяца назад
Уж слишком кликбейтное название. Вложенность зло, БЭМ не поддерживается, а уж про math, map, list и т.д. вообще можно промолчать, на этом можно расходиться.
@annblok_webdev
@annblok_webdev 2 месяца назад
Читайте закреп
@yurok1991
@yurok1991 2 месяца назад
Че только не придумают эти чуваки из w3c, вот жилось же нормально без обновлений где то в 2018-2020 годах… Ладно, буду уходить снова в цсс
@Serehajsss
@Serehajsss 2 месяца назад
Кстати реально вроде тогда все без обновлений было
@_Fantom_.
@_Fantom_. 2 месяца назад
@@Serehajsss Нововведения были всегда..
@_Fantom_.
@_Fantom_. 2 месяца назад
Если ты подумал, что эти нововведения уже заменили препроцессоры, то конечно уходи в css )
@user-wf6op2gi6v
@user-wf6op2gi6v Месяц назад
Сцыт в уши
@NoMoneyNoHoneyDude
@NoMoneyNoHoneyDude 2 месяца назад
Два тире, даже для RU говорящей аудитории - не нужно употреблять. Все знают, что это Double Dash или D-Dash или "дабл дэш".
@drevitsky
@drevitsky 2 месяца назад
Вложенности на проектах стараемся совсем не использовать.
Далее
Новый CSS и HTML!
37:44
Просмотров 148 тыс.
Разрезанный Человек 🤯
0:31
Просмотров 2,1 млн