Зроби цей світ краще 👇 👇 👇
🇺🇦 Фонд Притули – https://prytulafoundation.org/
🇺🇦 Стерненко – https://www.youtube.com/@STERNENKO

👻 На розвиток каналу Frontend Shinobi
БАНКА – https://send.monobank.ua/jar/5tEodxQoEu
Крипта – USDT 0x284eF2F4db8B27905d68bBBECBC95a119259A395

Матеріали:
IS –

Codepen – https://codepen.io/bookamba/pen/KwVBagd
Саття – https://www.pivale.co/resources/blog/css-nesting
Can I USE? https://caniuse.com/?search=nesting
ЩЕ Саття – https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector

Таймкоди:
00:00:00 – CSS Nesting Can I Use?
00:01:36 – Css Nesting vs SCSS стаття
00:02:00 – Приклад як працює CSS Nesting
00:09:05 – BEM і CSS nesting
00:12:00 – Зручності CSS Nesting hover etc
00:14:16 – Dark theme CSS Nesting
00:16:30 – Media queries CSS Nesting
00:17:28 – Пріорітезація у CSS Nesting, селектор “IS()”

Опис відео роліка:
У цьому відео розбираємо CSS Nesting — одну з найцікавіших і найочікуваніших фішок сучасного CSS, яка дозволяє писати стилі простіше, компактніше та зрозуміліше. Ви дізнаєтесь, як працює вкладення селекторів у чистому CSS без SCSS або препроцесорів, у чому різниця між CSS Nesting та SCSS, як це впливає на BEM, як використовувати вкладення з hover, медіа-запитами, темами (light/dark) та як працює пріорітезація зі складними селекторами та ().

Також переглянемо реальні приклади, підтримку в браузерах та кілька корисних матеріалів і статей з мережі.

#css #html #js #курсиCSS #урокиCSS #cssnesting #scss #frontend #webdevelopment #frontendtips #bem #webdesign #css2024 #csslesson #learncss #devtips