`Nesting Nativ în CSS (Imbricarea Regulilor cu &)` în CSS

Selectori și reguli de bază CSS Nesting Module

Învață cum folosești imbricarea nativă direct în browser cu selectorul &: fără Sass, fără compilatoare și cu suport complet pentru media queries interne.

Sintaxă CSS

.card { & > .title { ... } &:hover { ... } @media (...) { ... } }

CSS Native Nesting aduce în CSS standard una dintre cele mai iubite facilități din preprocesoarele Sass și Less: abilitatea de a imbrica regulile de stil unele în altele folosind simbolul ampersand &. Aceasta organizează codul modular, reduce duplicarea selectorilor și rulează nativ direct în browser, fără a fi nevoie de uneltele de build (Vite, Webpack) sau compilare intermediară.

Exemplu de cod imbricat curat în CSS Nativ

/* Componentă Buton scrisă cu CSS Nesting nativ */
.btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #3858e9;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;

    /* 1. Pseudo-clase imbricate cu & */
    &:hover {
        background-color: #2440c7;
    }

    &:focus-visible {
        outline: 2px solid #3858e9;
        outline-offset: 2px;
    }

    /* 2. Modificatori de stare sau temă */
    &.btn-secondary {
        background-color: #f1f5f9;
        color: #0f172a;

        &:hover {
            background-color: #e2e8f0;
        }
    }

    /* 3. Elemente descendente directe */
    & > .icon {
        margin-right: 8px;
        width: 18px;
        height: 18px;
    }

    /* 4. Media queries incluse direct în interiorul componentei! */
    @media (max-width: 640px) {
        width: 100%;
        justify-content: center;
    }
}

Regula simbolului & (Ampersand)

Simbolul & reprezintă selectorul părinte curent. Începând cu revizia din 2023 a standardului, browserele permit imbricarea chiar și fără & pentru selectorii de taguri (ex: p { span { color: red; } }), însă utilizarea explicită a lui & este recomandată pentru lizibilitate și pentru stări de tip &:hover sau &.is-active.