Organizowanie niestandardowego CSS za pomocą warstw

Podczas łączenia klas narzędziowych Tailwind z niestandardowym CSS mogą pojawić się konflikty specyficzności. Reguła niestandardowego CSS, taka jak .btn { color: red; }, może nadpisać narzędzie Tailwind text-blue-500 ze względu na kolejność w źródle, nawet jeśli zamierzali Państwo, aby pierwszeństwo miało narzędzie. Dyrektywa @layer Tailwind rozwiązuje ten problem, zapewniając jawną kontrolę nad miejscem w kaskadzie CSS, w którym wstawiane są niestandardowe style.

Tailwind organizuje cały wygenerowany CSS w trzy uporządkowane warstwy: base znajduje się na początku i zawiera resety oraz wartości domyślne na poziomie elementów. components zajmuje drugie miejsce i służy do tworzenia abstrakcji klas złożonych z wielu narzędzi. utilities znajduje się na końcu i zawiera wszystkie klasy narzędziowe o pojedynczym przeznaczeniu. Taka kolejność gwarantuje, że narzędzia zawsze mają pierwszeństwo przed stylami komponentów, a style komponentów przed stylami bazowymi — tworząc przewidywalną i zamierzoną hierarchię.

Warstwa bazowa jest właściwym miejscem na resety na poziomie elementów, domyślne style elementów HTML oraz style globalne stosowane bezwarunkowo. Typowe zastosowania obejmują ustawienie domyślnej czcionki elementu body, zdefiniowanie reguł box-sizing, wyzerowanie marginesów nagłówków i określenie stylów linków. Style w warstwie bazowej mogą zostać nadpisane przez dowolne style z warstwy components lub utilities.

Warstwa components służy do wyodrębniania powtarzających się kombinacji narzędzi do nazwanych klas za pomocą @apply. Zdefiniowane tutaj klasy komponentów mogą zostać nadpisane przez klasy narzędziowe zastosowane w kodzie HTML, ponieważ narzędzia znajdują się w późniejszej warstwie utilities. Dzięki temu klasy komponentów są elastyczne — ustawiają rozsądne wartości domyślne, które zawsze można dostosować dla konkretnej instancji za pomocą narzędzi.

Warstwa utilities służy do tworzenia niestandardowych klas narzędziowych o pojedynczym przeznaczeniu, których Tailwind nie udostępnia od razu. Mogą to być narzędzia dla właściwości CSS, których nie ma jeszcze w jądrze Tailwind, właściwości z prefiksami specyficznymi dla przeglądarek lub złożonych wartości zbyt szczegółowych dla domyślnej skali. Narzędzia w tej warstwie mają najwyższy priorytet i nadpisują zarówno style bazowe, jak i style komponentów.

Specyficzność CSS zwykle zależy od wagi selektora. Jednak specyfikacja CSS Cascade Layers (wykorzystywana przez Tailwind) zmienia działanie specyficzności: reguła w późniejszej warstwie zawsze wygrywa z regułą we wcześniejszej warstwie, niezależnie od złożoności selektora. Oznacza to, że klasa .p-4 z warstwy .utilities (pojedyncza klasa) automatycznie wygrywa z klasą .card.padded.extra z warstwy .components (trzy klasy).

Nie są Państwo ograniczeni do trzech domyślnych warstw Tailwind. Za pomocą CSS @layer można definiować całkowicie niestandardowe warstwy nazwane i kontrolować ich położenie w kaskadzie, deklarując je w odpowiedniej kolejności na początku pliku CSS. Jest to przydatne podczas integrowania bibliotek CSS innych firm w określonych miejscach kaskady lub tworzenia warstwowej architektury we własnym CSS.

CSS zapisany poza dowolnym blokiem @layer ma większą specyficzność niż każdy styl należący do warstwy. Oznacza to, że niestandardowy CSS zapisany bez opakowania w @layer zawsze nadpisze warstwowe narzędzia Tailwind, co może prowadzić do nieoczekiwanych problemów z układem. Aby uniknąć walki z kaskadą Tailwind, należy zawsze umieszczać niestandardowe style w odpowiedniej warstwie lub jawnie utworzyć warstwę nadpisań.

Dyrektywy @layer i @apply współpracują ze sobą. Należy zdefiniować warstwę, umieścić w niej klasy komponentów lub narzędziowe, a następnie użyć @apply w tych klasach, aby złożyć je z narzędzi Tailwind. Takie połączenie zapewnia korzyści organizacyjne warstw (przewidywalną kaskadę) oraz wygodę @apply (komponowanie z istniejących narzędzi) w ramach jednego wzorca.

W miarę rozwoju projektu należy podzielić CSS na wiele plików uporządkowanych według przeznaczenia warstw. Wszystko należy zaimportować do jednego pliku wejściowego. Style bazowe powinny być minimalne — obejmować tylko to, co rzeczywiście ma zastosowanie globalne. Pliki komponentów należy organizować według typu komponentu. Pliki narzędzi powinny zawierać wyłącznie narzędzia, których rzeczywiście brakuje. Taka struktura ułatwia wdrażanie nowych programistów i zapobiega przekształceniu CSS w trudny w utrzymaniu balast.

Gdy styl nie jest stosowany zgodnie z oczekiwaniami, należy otworzyć Chrome DevTools i przejść do panelu Styles. Przekreślone deklaracje wskazują style, które zostały nadpisane. Jeśli klasa narzędziowa jest przekreślana przez własny CSS komponentu, prawdopodobnie umieszczono ją poza warstwą (co nadaje jej wyższy priorytet w kaskadzie) albo w niewłaściwej warstwie. Przeniesienie jej do @layer components powinno przywrócić prawidłowe działanie, w którym narzędzia mają pierwszeństwo.

W tej lekcji nauczyłeś się: trzy warstwy Tailwind — base, components, utilities — tworzą hierarchię kaskady, w której każda późniejsza warstwa nadpisuje wcześniejsze; @layer base służy do definiowania wartości domyślnych elementów, @layer components do wyodrębnionych klas komponentów, a @layer utilities do niestandardowych klas narzędziowych. W następnej części omówimy pułapki związane z @apply oraz sytuacje, w których lepiej zastosować wyodrębnianie komponentów.