CSS: архитектура и продвинутые селекторы

Суть в одном предложении

Экспертный CSS — это современные селекторы (:has, :is, :where), cascade layers (@layer), contain/content-visibility для производительности и подходы вроде BEM/utility-first к архитектуре стилей.

Краткое определение

Экспертный уровень: родительский селектор :has(), группировка :is()/:where() без раздутия специфичности, @layer для управления порядком каскада между командами/библиотеками, свойства contain и content-visibility для изоляции рендеринга, а также осознанный выбор методологии организации CSS (BEM, utility-first).

Ключевые моменты

• :has() — единственный способ выбрать элемент по содержимому его потомков в чистом CSS
• :where() всегда имеет нулевую специфичность, в отличие от :is()
• @layer явно задаёт порядок приоритета между слоями стилей независимо от порядка подключения файлов
• content-visibility: auto пропускает рендеринг offscreen-контента для ускорения загрузки