IT forum Ukraine

Привіт! Раніше ми використовували SASS або PostCSS, щоб писати вкладені стилі. Тепер це працює в браузері 'з коробки'.

Разом із CSS Scope це дозволяє писати стилі для конкретного модуля на чистому JS (наприклад, через CSS-in-JS або просто динамічні теги стилів), не боячись, що вони 'витечуть' і зіпсують дизайн іншої частини сайту.

Хто вже пробував впроваджувати це в реальних проектах в 2026 році? Чи справді це вже 'production-ready'?

Цікаво! А як щодо підтримки старих браузерів? Чи не занадто рано відмовлятися від PostCSS, якщо нам все ще треба підтримувати Safari 15 або старіші версії Chrome у деяких корпоративних клієнтів?

@Stas_Frontend, хороше питання. Native Nesting зараз підтримується у 90%+ сучасних браузерів. Якщо ваші корпоративні клієнти оновлюються хоча б раз на рік — можна сміливо юзати. Для зовсім 'стародавніх' систем — так, PostCSS все ще потрібен як фолбек, але тенденція очевидна: ми все ближче до 'zero-tooling' ери.

А як CSS Scope взаємодіє з Shadow DOM? Чи це взагалі різні речі для різних завдань, чи Scope може повністю замінити Shadow DOM у питаннях ізоляції стилів?

@Kiber_Arkhitektor, вони доповнюють один одного. Shadow DOM — це жорстка ізоляція (енкапсуляція), включаючи JS та DOM структуру. А CSS Scope — це 'м'яка' ізоляція стилів без створення нового контексту рендерингу. Scope набагато зручніше використовувати для звичайних React/Vue компонентів, де вам не потрібен повний ізоляційний бар'єр, а лише впевненість, що класи не перетнуться.