Deklarowanie i porządkowanie @layer
Zadeklaruj nazwane warstwy kaskady i kontroluj kolejność ich priorytetów za pomocą instrukcji @layer.
Deklarowanie i porządkowanie @layer to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym jest @layer?
Warstwy kaskady CSS (@layer) umożliwiają jawne sterowanie priorytetem reguł CSS w kaskadzie, niezależnie od specyficzności. Warstwy o niższym priorytecie przegrywają nawet wtedy, gdy zawierają selektory o wyższej specyficzności.
Dlaczego @layer ma znaczenie
Bez warstw każda reguła CSS konkuruje za pomocą specyficzności i kolejności w źródle. Prowadzi to do walki na specyficzność, gdy style resetu, komponentów i narzędziowych rywalizują o priorytet. Warstwy nadają każdej grupie stały, przewidywalny priorytet.
Deklarowanie warstw
Warstwy należy zadeklarować z wyprzedzeniem w jednej instrukcji. Kolejność deklaracji określa priorytet — późniejsze warstwy wygrywają z wcześniejszymi.
<p>This scene only declares layer order — see the CSS panel:</p>
<p style="color:#888;font-size:0.9em;">@layer reset, base, components, utilities;</p>Położenie deklaracji warstw
Deklaracja @layer powinna znajdować się na początku arkusza stylów (lub głównego pliku importu). Po deklaracji można dodawać style do warstw w dowolnej kolejności — priorytet określa kolejność deklaracji, a nie miejsce dodania stylów.
Dlaczego kolejność w źródle nie ma znaczenia dla warstw
Ponieważ priorytet warstwy jest ustalany w momencie deklaracji, style można dodawać do warstwy w dowolnym miejscu, nawet przed jej zadeklarowaniem, korzystając z odwołania z wyprzedzeniem. Liczy się zadeklarowana kolejność.
Reguła priorytetu warstw
Deklaracja w późniejszej warstwie zawsze wygrywa z deklaracją we wcześniejszej warstwie, niezależnie od specyficzności:
<p>Reset layer !important paragraph (red)</p>
<div id="header">Components layer header (blue)</div>Style poza warstwami
Style umieszczone poza dowolną warstwą nazywa się niezgrupowanymi w warstwie. Mają najwyższy priorytet, nawet wyższy niż ostatnia zadeklarowana warstwa. Należy ich używać do awaryjnych nadpisań, które zawsze powinny wygrywać.
Hierarchia priorytetów
Pełna kolejność priorytetów (od najwyższego do najniższego dla stylów autora):
- Style poza warstwami (poza dowolnym @layer)
- Ostatnia zadeklarowana warstwa (np. utilities)
- Przedostatnia warstwa (np. components)
- Wcześniejsze warstwy (base, reset)
Odwrócenie działania !important w warstwach
!important w warstwach jest podstępne: odwraca kolejność warstw dla danej deklaracji. !important w najwcześniejszej warstwie wygrywa z !important w późniejszych warstwach. Odpowiada to pierwotnemu działaniu kaskady w przypadku stylów użytkownika i autora.
Zagnieżdżone warstwy
Warstwy można zagnieżdżać za pomocą notacji z kropką:
<p>This scene declares nested layers with dot notation — see the CSS panel.</p>Przykład praktycznej konfiguracji
Realistyczna konfiguracja warstw projektu:
<p>A realistic project layer order — see the CSS panel.</p>Szybkie sprawdzenie
Warstwy zadeklarowano jako: @layer base, components, utilities. Style której warstwy wygrywają w przypadku konfliktu?
Podsumowanie
@layer ustanawia jawnie uporządkowane warstwy kaskady. Nazwy warstw należy deklarować w kolejności priorytetów, od najniższego. Późniejsze warstwy zawsze wygrywają z wcześniejszymi, niezależnie od specyficzności. Style poza warstwami mają najwyższy priorytet. !important odwraca kolejność priorytetów warstw dla danej deklaracji.
Ucz się CSS dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Deklarowanie i porządkowanie @layer” jest bezpłatna?
Tak — pełny tekst „Deklarowanie i porządkowanie @layer” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Deklarowanie i porządkowanie @layer”?
Zadeklaruj nazwane warstwy kaskady i kontroluj kolejność ich priorytetów za pomocą instrukcji @layer. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Deklarowanie i porządkowanie @layer”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Deklarowanie i porządkowanie @layer
- Dodawanie stylów do warstw
- Priorytet warstw i interakcja z !important
- Warstwy w kodzie zewnętrznym