Dodawanie stylów do warstw
Przypisuj reguły CSS do określonych warstw za pomocą bloków @layer i importowanych arkuszy stylów.
Dodawanie stylów do warstw to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 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.
Dwa sposoby dodawania stylów do warstw
Style można dodawać do warstwy bezpośrednio (wewnątrz bloku @layer) albo za pomocą @import (aby przypisać importowany arkusz stylów do warstwy).
Bezpośredni blok @layer
Reguły należy umieścić w bloku @layer z nazwą warstwy:
<button class="button">Layered button</button>Dodawanie do istniejącej warstwy
Style można dodawać do warstwy w wielu osobnych blokach @layer. Wszystkie deklaracje zostaną połączone w tej warstwie:
<button class="button">Button</button>
<input class="input" placeholder="Input" />Warstwy anonimowe
Blok @layer bez nazwy tworzy warstwę anonimową. Do warstw anonimowych nie można później dodawać stylów, a ich pozycja jest ustalana w miejscu wystąpienia:
<p style="margin: 24px; border: 1px dashed #999;">Normal paragraph (default margin)</p>
<p class="reset" style="border: 1px dashed #999;">Reset paragraph (anonymous layer sets margin: 0)</p>@import z @layer
Cały importowany arkusz stylów należy przypisać do warstwy:
<p>This scene assigns whole imported stylesheets to layers — see the CSS panel.</p>Podział CSS komponentów na pliki
W projekcie modułowym każdy plik komponentu dodaje style do warstwy components:
<button class="button">Button</button>
<div class="card">Card</div>Warstwy a PostCSS/Sass
Zarówno Sass, jak i PostCSS współpracują z @layer. Warstwy można zdefiniować w głównym pliku wejściowym, a następnie użyć @use lub @import do dołączenia fragmentów komponentów, które dodają style do tych warstw.
Style wbudowane a warstwy
Style wbudowane (atrybut style="") nie podlegają działaniu warstw — zawsze wygrywają ze stylami dowolnej warstwy. W warstwach można umieszczać tylko reguły arkusza stylów (w tym bloki <style>).
Debugowanie warstw w narzędziach deweloperskich
Narzędzia deweloperskie Chrome pokazują granice warstw w panelu Styles. Reguły z warstwy o niższym priorytecie, nadpisane przez warstwę o wyższym priorytecie, są przekreślone, a zwycięska warstwa jest wskazana.
Kompatybilność wsteczna
Przeglądarki, które nie obsługują @layer, traktują wszystkie bloki @layer jak standardowe bloki CSS (renderują całą zawartość). Działanie kaskady jest inne, ale style nie zostają utracone. Dla bezpieczeństwa kod zależny od tej funkcji należy opakować w @supports (@layer selector).
Migracja istniejącego CSS do warstw
Strategia migracji:
- Zadeklarować warstwy na początku głównego pliku CSS
- Umieścić każdą istniejącą sekcję CSS w odpowiadającym jej bloku warstwy
- Przetestować rozwiązanie i naprawić wszelkie problemy z priorytetami
- Z czasem usunąć niepotrzebne selektory o wysokiej specyficzności
Szybkie sprawdzenie
Jak dodać style z wielu osobnych bloków @layer do tej samej nazwanej warstwy?
Podsumowanie
Style należy dodawać do warstw za pomocą nazwanych bloków @layer name { } — można je dzielić między pliki, a ich zawartość zostanie połączona. Importowane arkusze stylów należy przypisywać do warstw za pomocą @import layer(). Warstw anonimowych nie można ponownie otworzyć. Style wbudowane zawsze nadpisują style zadeklarowane w warstwach.
Często zadawane pytania
Czy lekcja „Dodawanie stylów do warstw” jest bezpłatna?
Tak — pełny tekst „Dodawanie stylów do warstw” 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 „Dodawanie stylów do warstw”?
Przypisuj reguły CSS do określonych warstw za pomocą bloków @layer i importowanych arkuszy stylów. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Dodawanie stylów do warstw”?
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