⚡️ Эта новинка CSS уничтожила SCSS
ฝัง
- เผยแพร่เมื่อ 26 มิ.ย. 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!
Офигеть! Спасибо! Лайк! Познавательно!
Ну это конечно интересные и полезные изменения, но все же пока еще очень рано говорить о замене препроцессоров обычным css, а потому продолжаем работать на scss и дальше..
Спасибо за подробный разбор. Я где то уже видел такое, но так и не понял для чего он, а тут все наглядно!
Полумна Лавгуд как всегда всё очень четко раскидала в своем видео, лайк 👍
...поживём, увидим. Лайк за труды :)
Это конечно круто , но как же mixing, function, ….
По мне вложенности в css какие то кривые
Препроцессор дает более удобный синтаксис и доп. возможности.
Если человек юзает scss только ради вложенности, то мне его жаль. Такой разраб не в курсе о всех возможностях препроцессора, которых в css и близко пока нет😂
Так можно сказать о чем угодно, комментарий для самоутверждения.
Уничижительный тон, ты что в семье деревенских алкашей родился? Каким образом ты относишься к такой теме, как в этом ролике? Ты общался с кем либо в Сан-Хосе? Там так говорят с кем либо? Дикарь.
Каких например?
@@ukrainetoday960 Миксины, расширения (extend) это как минимум. Там много чего есть.
@@ukrainetoday960к примеру функция которая перегоняет из px в rem
Если есть анна блок то где то должна быть анна флекс
хорош
Э.Суровый
раунд!
Анна Грид
Анна Инлайн
Спасибо Анна за полезный контент
Всё в Вас прекрасно :))) 💐💐💐
Годно 👍
В принципе это очень полезно для новичков,которые в будущем уже будут переходить на препроцессор )Так сказать c самого начала привыкать к похожему синтаксису.
Спасибо, снова узнал что-то новое)
Вложенность в CSS - это очень хорошо, этого реально не хватало. Но лично для меня так же важна возможность разбиения кода на кучу мелких файлов с последующей сборкой в один файл стиля (ну и миксины с экстендами тоже). На простеньком проекте можно и на чистом CSS все сделать сразу в одном файле, но в большинстве случаев файл разрастается более чем в 10000 строк, и такую простыню неудобно поддерживать. При этом, к сожалению импорт в чистом CSS эквивалентен просто подключению кучи css-файлов в хеде, что не хорошо для оптимизации.
Я тоже удивилась, когда реально вложенный @media сработал, как надо. В целом да, есть еще много не достающих тем из SCSS, но то, что уже добавлено в CSS - они будто и вдохновляются тем, что было хорошего в SCSS.
а как же плагины для сборки? Разделяешь на несколько css файлов и все собирается в один css
Уже несколько лет совершенно не заморачиваюсь всефозможными препроцессорами и фреймворками, поскольку, при определённых навыках, они только отвлекают. А здесь автор описал вполне приятные дополнения. Анна умничка!
Кайф, спс
Прекрасно.
О, чекбоксы хочу стилизовать. Спрашивал у чат gpt, но он дал нерабочий код. А гуглить было лень :)
Полезное видео
Старая версия css больше не будет работать? То есть на старых сайтах вёрстка посыпется?
Всё работает и продолжить работать, как и раньше
спасибо за видео! но пока не везде поддерживается? а будет везде?
Будет везде, кроме IE разумеется
А как с поддержкой браузерами?
да это хорошо в некоторых случаях я не использую все привелегий scss я делаю верстку для движков и зачастую когда делается вывод тех или иных элиментов приходится вносить правки а так мне кажется это упрощает. я знаю что scss можно разбивать на множество фаилов и сжимать конечный результат но когда делаются правки или изменения на движке не удобно
Все удобно, если использовать удобные инструменты для сборки. Например live sass
@@neveren2011 я извиняюсь но каким образом стилизовать допустим выводы minishop плагина на modx и если хостинг без доступа по ssh ?
@@neveren2011 jiop
Вы использовали :has в верстке, а где можно узнать об этом больше
в интернете
Набери в браузере "Дока", там и не только про has узнаешь)
Ну может в дальнейщем и да, но сейчас без препроцессора скудно
Вспомнил, что мне всё время хочется изменить в CSS. Я хотел бы иметь свойство "display" с двумя значениями "yes" и "none", а все остальные значения отдал бы свойству "format". Например: format: flex; format: inlain-block; format: block; format: table; и так далее. Так удобнее с js-ом работать.
ну может тогда не "yes" и "none", а "true" и "false"?
@@user-cr8gq2vo5i Да точно, это правильный вариант!
поехавший
🔥🔥Тёлачка , ты тёлачка новогодняя ёлачка
Балда! не так к ней надо клеится а вот так: О великая h1, между нами огромный margin, но как же быть если охота свой body к вам прикрепить?
Теоретически, по бэму, несколько извращенно, можно так:
.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у тебя наверное большой опыт коммерческой разработки 😂
Смотрю на эти новые фичи... Паника! 😰 Всё! Нужно переучиваться, всё по-новому делать! 😓😭
Смотрю на поддержку этих фич... Ой, в ж*у! 😁 Можно ещё 5 лет сидеть и не бзд*ть на SCSS 😅 А там уж и глянем: чё у них из всего этого в итоге получится, и как они это реально внедрят в массы 😁👌
Нет, ну я вот потихоньку как-то понял и проникся "CSS Variables (Custom Properties)" вместо SCSS переменных. Ну окээй! Действительно и поддержка норм и по функционалу ок и удобненько можно из JS взаимодействовать с ними... 😎👌
А эти все ваши новомодные цацки я пожалуй ещё посмотрю, но не буду сильно рассчитывать на них 😅
CSS переменные и sass/scss это нечто разное. И сравнивать некорректно.
@@webs3787, ещё как корректно сравнивать. Это элементы кода, которые выполняют одну и ту же функцию. Они в проекте взаимозаменяемы, но работают, конечно, совершенно по разному. И важно понимать, чем именно они отличаются и как работают. И, вместе с тем, конечно же, они даже не обязательно должны одни заменять другие. Они вполне могут дополнять друг друга в одном проекте, если не получится из-за этого путаницы в стиле оформления кодовой базы 🤔
Из того, что я вижу, селектор наследования работает точно так же, как и в SCSS, и каждый раз его ставить точно не надо. А так нововведение, конечно, хорошее. И, на мой взгляд, CSS ещё очень далеко до SCSS в плане возможностей и удобства.
Ставить стоит тем, кто пока не привык, а если уже есть опыт в SCSS, то да - понимание, где его ставить, а где нет уже понятно сразу.
Так и не понял зачем все это юзать, если и по старинке все работает и без всяких выкрутасов, проще пишется и делается, как по мне
Вы рассуждаете так, будто CSS и SCSS это похожие, но сильно разные вещи.
"этот символ" называется "ampersand" если что :)
В scss есть модульность. Только ради этого я от него не откажусь.
В смысле в CSS появились переменные? Мы их использовали как нововведение в годочке 2016-м, если мне память не изменят. 8 лет как ни как прошло.
2016 у них была еще слабая поддержка, их много лет на реальных проектах не использовали, так как старались поддерживать IE. Сейчас такой потребности нет
То что мы ставим & при вложенности в случаях, когда используем a:hover, a:has, a.someClass и так далее это логически понятно. И понятно, почему без & это работать не будет (речь идет о том же элементе, а не о вложенном). Поэтому мне не очень понятно, зачем & использовать повсеместно. .someClass1 .someClass2: тут надобности такой нет. .someClass1.someClass2 или a:hover - совсем другое дело. На мой взгляд, это будет только мешать и сбивать с толку, мусорить код.
Ну почему на питоне нет такого как Аня учителя.
Как выглядеть как вы, будто вам всегда 16😊
Помимо вложенности я лично активно использую миксины и функции. И без них писать стили для меня это просто дикий неудобняк.
А для тех кто только вложенности использует в scss он может и отказаться от препроцессора.
8:28 заведомо писать то, что можно не писать. Зачем к этому привыкать? Если обратить внимание на наличие пробела, то понимание придет само. И писать это бессмысленно, тем более привыкать к этому.
Привыкать надо только новичкам, так как у них еще нет понимания, где оно нужно, а где нет. Профи не актуален этот совет.
В scss есть ещё очень много того, чего нет в CSS. Рановато ещё хоронить препроцессоры))
Ну плюс минус пока бесполезно, переменные то тут то там уже какое-то время вижу используют, ну а насчёт вложенности пока недотягивает до 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 будешь ломать верстку.
И вообще не сможешь написать стили.
Нужно только нормально ковырнуть задачи на которых я натыкался.
Особенно при верстке магазинов с мелкими кнопками и менюшками, в торых лежат другие менюшки.
Я бы подписался если бы вы так не палились что не разбираетесь в том что объясняете. Есть такое слово "подстановка", можно было через нее объяснить и через разворачивание новых правил в старые и было бы в разы проще и понятнее.
что то мне кажется новые фишки css поплывут на некоторых браузерах
Все норм, но пользоваться этим мы будем лет через 5 так как на более старших версиях браузеров это работать не будет в отличии от scss который просто компилируется в css
Для начинающих прокатит. А так такого понятия нет! Есть OOCSS
Я стал жирным, потому что сижу целыми днями за компом с кодом и жду видео Аннушки
Не лучший комплимент )
П*здец
14:48 плохая практика. лучше полностью прописывать называние класса по бэму
не согласен с терминологией. "селектор наследования" &- это не селектор наследования. это привязка.
main { &:has(h2)} - это по факту main:has(h2)
ГДЕ ТУТ НАСЛЕДОВАНИЕ?
Термин выдуман не из головы, а из доки w3c "Nesting Selector: the & selector"
@@annblok_webdev Неважно.
@@annblok_webdev Nesting Selector - Селектор вложенности. Вы один раз называете так, другой раз иначе. Эти термины неравнозначны
@@annblok_webdev даже если и подразумевается как наследование, но скорее всего не то которое мы понимаем в классическом виде.
как всегда в бочке мёда есть ложка дёгтя...кароч расходимся, БЭМ новыми фичами css не поддерживается
Я использую taiwind css нафиг нужен scss
Дублирование в scss на самом деле не очень хорошая идея, так как смешиваются два принципа - вложенности в родитель и модификации родителя. Например { &.accent:red; } означает класс у родителя, а на том же уровне синтактической вложенности { &_accent:red; } почему-то вдруг означает селектор потомка. Это просто визуально не верно, плохой дизайн.
В целом фигня и пока близко не подошли к тому, чтобы заменить scss/sass. И даже те же переменные и вложенности никак не меняют ситуацию
Поч?
Scss тоже мусор тупой.
Только sass по феншую
мусор , где миксины , где функции?
я на sass свой фреймворк написал,а сss так может?
че прям без джиэса?
@@yurok1991 ну так это sass фраймворк , не js
Слово "потенциально" походу ты пропустил...Это не значит, что SCSS пришел конец...
О великий эксперт, может быть и миксины добавят вскоре?? А функции есть в css
@@vladshiroky кастомные функции?
Ну ты дал
Если добавят миксины то css положит сайт.
Зачем так много воды?
не вижу что бы кто то кого то уничтожил, если разработчик пордключал SCSS что бы верстать одностраничку с тремя блоками - это идиот, если разработчик будет писать проект с кучей компонентов и огромной CSS простынью на десятки тысяч строчек, то даже если он и попользовался переменными и вложенностью, он еще больший идиот чем первый
Вложенность это не только для замены scss на css, вложенность это уменьшение веса css файла. Зачем 20 раз повторять в селекторе название блока.
Зачем рассказывать больше половины видео про возможности scss в css ? Как будто про scss видео смотрел... акцента нет на том, что МОЖНО и как это Доступно. Акцент на куче селекторов из scss...
Уж слишком кликбейтное название. Вложенность зло, БЭМ не поддерживается, а уж про math, map, list и т.д. вообще можно промолчать, на этом можно расходиться.
Читайте закреп
Че только не придумают эти чуваки из w3c, вот жилось же нормально без обновлений где то в 2018-2020 годах…
Ладно, буду уходить снова в цсс
Кстати реально вроде тогда все без обновлений было
@@Serehajsss Нововведения были всегда..
Если ты подумал, что эти нововведения уже заменили препроцессоры, то конечно уходи в css )
Сцыт в уши
Два тире, даже для RU говорящей аудитории - не нужно употреблять. Все знают, что это Double Dash или D-Dash или "дабл дэш".
Вложенности на проектах стараемся совсем не использовать.