Современный CSS

Что значит «современный CSS»

За последние годы в CSS появились возможности, для которых раньше нужны были Sass или JavaScript. Всё, что ниже, сегодня работает во всех основных браузерах — это стоит использовать, а не просто знать.

Nesting — вложенные правила, нативно

.card {
  padding: 1rem;

  & h3 { font-weight: 600; }        /* .card h3 */
  &:hover { border-color: gray; }   /* .card:hover */
  .dark & { background: black; }    /* .dark .card */

  @media (min-width: 48rem) {
    padding: 2rem;
  }
}

& = родительский селектор. Как в Sass, но без сборки. Не вкладывайте глубже 2–3 уровней — растёт специфичность, и CSS становится трудно читать.

:has() — «родительский селектор»

Впервые можно стилизовать элемент по тому, что он содержит, или по тому, что происходит после него:

.card:has(img) { padding-top: 0; }                       /* карточки с изображением */
.field:has(input:invalid) label { color: var(--danger); } /* label невалидного поля */
form:has(:focus-visible) { outline: 2px solid; }          /* форма, в которой фокус */
body:has(dialog[open]) { overflow: hidden; }              /* блокирует прокрутку при открытой модалке */

Многое, что раньше требовало состояния в React (класс на родителе), теперь решается одним CSS.

:is() и :where() — списки селекторов

:is(h1, h2, h3):hover { color: var(--accent); }
:where(ul, ol) { padding-left: 1rem; }

Логические свойства

Вместо лево / право / верх / низ вы описываете направление относительно текста. Раскладка автоматически работает и в языках с письмом справа налево (арабский, иврит).

В Tailwind они есть: ps-4, pe-4, ms-auto, px-4 = padding-inline.

@layer — порядок каскада, явно

@layer reset, base, components, utilities;

@layer components {
  .btn { padding: 1rem; }
}

Слои, объявленные позже, побеждают независимо от специфичности — см. Каскад. Tailwind v4 построен на них (theme, base, components, utilities).

Другие полезные возможности

Коротко

• Нативная вложенность через &; :has() стилизует по содержимому; :where() = нулевая специфичность.
• Логические свойства (padding-inline, inset) вместо лево / право.
• @layer управляет каскадом; color-mix, oklch, text-wrap: balance — для современных деталей.

Официальные источники

• MDN — CSS nesting
• MDN — :has()
• MDN — Logical properties
• MDN — @layer