Wstęp i opis problemu

Bardzo często podczas tworzenia kodu CSS zdarza się nadpisywanie właściwości elementów dziedziczących klasy. Przykładowa sytuacja, przycisk stylizowany jako czarny, wyświetli się jako niebieski, ponieważ w dalszej części kodu CSS klasa tegoż przycisku będzie kolorowała go na niebiesko. Kiedyś ten problem można było rozwiązać (choć nie powinno się) dodając !important w odpowiednim miejscu i wymusić nadpisanie wartości. Dzisiaj z pomocą przychodzi nam zagadnienie Cascade Layers.

Reguła @layer

Reguła @layer opisuje warstwę kaskadową z opcją przypisywania reguł stylu za pomocą zagnieżdżonego bloku arkusza stylów lub importu z innego pliku CSS. Od razu może zacznijmy od przykładu, by widzieć o czym mowa.

/* przykład bloku */
@layer first {
  .button--main {
    color: #f2a;
    background: #1e1e1e;
  }
}

/* przykład importu z zewnątrz */
@layer buttons url(buttons.css);

Oczywiście samo zadeklarowanie warstw nie daje nam efektu. Należy je niejako „wywołać” tak, jak poniżej:

/* przykład warstwy */
@layer first;

/* przykład wywołania kilku warstw */
@layer first, second;

Jak widać na powyższym, możemy wywołać jedną lub więcej warstw.

👉 Tutaj bardzo ważna uwaga. Kolejność wykonywania warstw jest kluczowa, kolejność deklaracji nie jest kluczowa.

Gdzie @layer jest w hierarchii?

Przyjrzyjmy się hierarchii i wyjaśnijmy, gdzie się znajduje w niej @layer.

1. Najważniejsze są style opatrzone dopiskiem !important. Są one wykonywane jako pierwsze i będą miały najwyższy priorytet.
2. Drugie w kolejności będą style tzw. inline, czyli takie, które są zaimplementowane bezpośrednio w kodzie HTML – <span style="color: #e50000;">.
3. 👉 W końcu tutaj będą nasze elementy zawarte w @layer.
4. Kolejno wykonają się selektory CSS implementowane bezpośrednio w arkuszach CSS (niezagnieżdżone).
5. Na koniec hierarchii są pozostałe style będące w zagnieżdżeniach i wszystkie te, których nic wyżej nie nadpisze.

Przykład użycia @layer

Załóżmy, że chcemy stworzyć zestaw przycisków i chcemy je uporządkować za pomocą warstw. Oto kod, który za chwilę omówimy:

<div class="container">
  <a href="#" class="button button--main">Main</a>
  <a href="#" class="button">Save</a>
  <a href="#" class="button button--second">Cancel</a>
</div>

Mamy 3 odnośniki będące oznaczone klasami jako button z odpowiednimi modyfikatorami. Owe modyfikatory będą tu kluczowe, ponieważ to je wykorzystamy w @layer.

.button--main {
  color: #f2a;
  background: #1e1e1e;
}

.button {
  color: #fff;
  background: #01708d;
  padding: 2rem;
  text-decoration: none;
}

.button--second {
  color: #fff;
  background: #83ba52;
}

Powyższy kod jest już kodem docelowym, wygenerowanym (załóżmy). Ktoś tak skonstruował źródło kodu, że klasy .button nie będą w odpowiedniej kolejności. Wykorzystując warstwy kod będzie wyglądał następująco:

@layer second, first;

.button {
    padding: 2rem;
    text-decoration: none;
  }

@layer first {
  .button--main {
    color: #f2a;
    background: #1e1e1e;
  }
}
@layer second {
  .button {
    color: #fff;
    background: #01708d;
  }
  .button--second {
    color: #fff;
    background: #83ba52;
  }
}

Mimo, iż klasy .button nie są po kolei, użycie @layer sprawi, że kolory odnośników będą odpowiednie.

Oto efekt, jaki uzyskaliśmy:

Zagnieżdżanie warstw

Rzecz jasna mamy możliwość zagnieżdżania warstw wewnątrz innych.

@layer default {
  /* kod #1 */
}

@layer framework {
  @layer default {
    /* kod #2 */
  }

  /* kod #3 */

  @layer theme {
    /* kod #4 */
  }
}

W powyższym przykładzie hierarchia warstw będzie przedstawiać się następująco:

1. default
2. framework.default
3. framework.theme
4. framework
5. inne style nieujęte w warstwach.

Wsparcie

Podsumowanie

Cascade layers jest kolejnym narzędziem wspierającym pracę nad wydajnym i optymalnym kodem CSS. Póki co wspierają go najnowsze wersje przeglądarek (stan na dzień 21.02.2022), jednak biorąc pod uwagę potencjał jestem pewien, że kolejne przeglądarki niebawem to wdrożą. Społeczność frontendowa z pewnością na to czeka. Ograniczeniem jednak niestety może być nadal spora część użytkowników, którzy posiadają starsze wersje przeglądarek.