CSS modern

Ce înseamnă „CSS modern”

În ultimii ani, CSS a primit funcționalități care înainte cereau Sass sau JavaScript. Toate de mai jos funcționează azi în toate browserele majore — merită folosite, nu doar știute.

Nesting — reguli imbricate, nativ

.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;
  }
}

& = selectorul părinte. Ca în Sass, dar fără build. Nu imbrica mai mult de 2–3 nivele — specificitatea crește și CSS-ul devine greu de citit.

:has() — „selectorul părinte”

Pentru prima dată, poți stiliza un element după ce conține sau după ce se întâmplă după el:

.card:has(img) { padding-top: 0; }                       /* cardurile cu imagine */
.field:has(input:invalid) label { color: var(--danger); } /* label-ul unui câmp invalid */
form:has(:focus-visible) { outline: 2px solid; }          /* formularul în care e focus */
body:has(dialog[open]) { overflow: hidden; }              /* blochează scroll-ul când e un modal deschis */

Multe lucruri care cereau state în React (o clasă pe părinte) se rezolvă acum doar cu CSS.

:is() și :where() — liste de selectori

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

Proprietăți logice

În loc de stânga / dreapta / sus / jos, descrii direcția față de text. Layout-ul merge automat și în limbi scrise de la dreapta la stânga (arabă, ebraică).

Tailwind le are: ps-4, pe-4, ms-auto, px-4 = padding-inline.

@layer — ordinea cascadei, explicit

@layer reset, base, components, utilities;

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

Layer-ele declarate mai târziu câștigă, indiferent de specificitate — vezi Cascada. Tailwind v4 e construit pe ele (theme, base, components, utilities).

Alte funcționalități utile

Pe scurt

• Nesting nativ cu &; :has() stilizează după conținut; :where() = specificitate zero.
• Proprietăți logice (padding-inline, inset) în loc de stânga / dreapta.
• @layer controlează cascada; color-mix, oklch, text-wrap: balance pentru detalii moderne.

Surse oficiale

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