Zagnieżdżanie CSS

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Jedna z naszych ulubionych funkcji preprocesora CSS jest teraz wbudowana w język: zagnieżdżanie reguł stylów.

Adam Argyle

Przed zagnieżchnięciem każdy selektor musiał być zadeklarowany osobno. Prowadzi to do powtarzania się elementów, tworzenia dużej ilości plików stylów i rozproszonego procesu tworzenia.

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Po zagnieżdżeniu selektory można kontynuować, a powiązane reguły stylów można grupować.

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Wypróbuj to w przeglądarce

Zagnieżdżanie ułatwia deweloperom pracę, ponieważ zmniejsza potrzebę powtarzania selektorów, a także współlokalizuje reguły stylów dla powiązanych elementów. Może też pomóc w dopasowaniu stylów do kodu HTML, na który są kierowane. Jeśli element .nesting został usunięty z projektu, możesz usunąć całą grupę, zamiast szukać w plikach powiązanych selektorów.

Umieszczanie w grupach może być przydatne w tych sytuacjach:

Zagnieżdżanie jest dostępne w wersji Chrome 112, a także w wersji technicznej Safari 162.

Wprowadzenie do zagnieżdżania właściwości CSS

W dalszej części tego artykułu, aby ułatwić Ci wizualizację wyborów, użyjemy następującego środowiska demonstracyjnego. W tym domyślnym stanie nic nie jest wybrane, a wszystko jest widoczne. Wybierając różne kształty i rozmiary, możesz ćwiczyć składnię i sprawdzać, jak działa.