Przycisk na stronie nie zmienia koloru, choć reguła CSS wygląda poprawnie. Często winna jest literówka w nazwie klasy albo selektor, który przegrywa z inną regułą, ale czasem problem leży w samym HTML-u.
Klasy pozwalają stylować elementy bez wiązania wyglądu z nazwą tagu
- Kropka w CSS wskazuje selektor klasy, na przykład
.button. - Spacje w HTML rozdzielają klasy przypisane do jednego elementu.
- Wielkość liter w nazwach klas ma znaczenie:
.Cardi.cardto różne selektory. - Prosty selektor łatwiej nadpisać niż rozbudowaną regułę o wysokiej specyficzności.
Selektor klasy zaczyna się od kropki, a atrybut HTML już nie
W HTML przypisujesz elementowi nazwę przez atrybut class, a w CSS poprzedzasz tę nazwę kropką. To drobna różnica, ale właśnie na niej potykają się osoby, które pierwszy raz łączą oba pliki.
.button {
padding: 0.75rem 1rem;
border: 0;
}
.button-primary {
background: #174ea6;
color: white;
}Jeden element może mieć kilka klas, rozdzielonych spacjami. W przykładzie przycisk dostaje wspólne odstępy z .button oraz kolor z .button-primary. W HTML nie stawiasz kropek: zapis class=".button" oznaczałby nazwę klasy zawierającą kropkę, a nie klasę „button”.
Selektor .button pasuje do elementu, którego lista klas zawiera dokładnie nazwę button. Dlatego .btn nie zadziała na elemencie z class="button", nawet jeśli nazwy wydają się podobne. Zasady dopasowania opisuje dokumentacja selektorów klas MDN.
Sprawdź nazwę i dopasowanie, zanim zmienisz deklaracje CSS
Gdy styl nie działa, dokładanie kolejnych właściwości zwykle tylko zaciemnia sprawę. Najpierw porównaj nazwę klasy w HTML-u z selektorem, a potem sprawdź, czy reguła w ogóle pasuje do elementu.
| Sytuacja | Możliwa przyczyna | Co zrobić |
|---|---|---|
HTML ma class="card", CSS ma .cards |
Nazwy są różne | Ujednolić nazwę w HTML-u lub CSS-ie. |
HTML ma class="Card", CSS ma .card |
Inna wielkość liter | Popraw zapis tak, aby był identyczny po obu stronach. |
HTML ma class="card featured", reguła to .card.featured |
Selektor wymaga obu klas na tym samym elemencie | Dodaj brakującą klasę albo użyj samego .card, jeśli ma pasować do wszystkich kart. |
| Reguła pasuje, lecz kolor się nie zmienia | Inna deklaracja wygrywa w kaskadzie | Sprawdź aktywne reguły i specyficzność w panelu Styles narzędzi deweloperskich. |
| Nazwa klasy zaczyna się od cyfry albo zawiera znak specjalny | Selektor może wymagać ucieczki znaku | Najprościej zmienić nazwę na identyfikator zaczynający się od litery, np. item-123. |
Rozróżnij też dwa zapisy, które wyglądają niemal identycznie. .card.featured wybiera element mający obie klasy, a .card .featured szuka elementu z klasą featured wewnątrz elementu z klasą card. Jedna spacja zmienia cel selektora.
Jedna klasa ma specyficzność 0-1-0, ale kontekst może ją podbić
Gdy dwie reguły ustawiają tę samą właściwość dla tego samego elementu, przeglądarka rozstrzyga konflikt według kaskady. Specyficzność selektora to jeden z elementów tego rozstrzygnięcia: .card ma wartość 0-1-0, a article.card ma 0-1-1, bo dochodzi selektor elementu.
.card {
color: #222;
}
article.card {
color: #174ea6;
}Jeśli element to , obie reguły pasują, ale druga ma większą specyficzność. Z kolei #app .card wygrywa z nimi przez selektor ID. Algorytm i przykłady opisuje specyfikacja Selectors Level 4.
Reguła praktyczna: jeśli nowa klasa ma zmieniać jeden element niezależnie od jego otoczenia, zacznij od selektora klasy, na przykład .card-title. Gdy musisz dopisać kilka poziomów zagnieżdżenia albo !important, zanim styl zacznie działać, najpierw sprawdź istniejący konflikt. Uważam, że proste selektory są łatwiejsze w utrzymaniu, bo kolejna osoba może je nadpisać bez rozplątywania całego łańcucha.
Nazwy klas opisuj rolą elementu, a stan trzymaj osobno
Klasa .red mówi, jak coś wygląda, lecz niewiele mówi o tym, czym jest. Jeśli projekt zmieni kolor przycisku, nazwa przestanie pasować do jego funkcji; .button-danger albo .button-primary lepiej opisuje zastosowanie.
Popularnym uporządkowanym schematem jest BEM. W jego konwencji card__title oznacza element bloku „card”, a card--featured jego modyfikator. Dokumentacja konwencji nazewniczej BEM podkreśla, że nazwa ma wskazywać blok, element lub modyfikator, nie przypadkowy kolor.
Przykład w HTML-u może wyglądać tak: . Pierwsza klasa zapewnia bazowy wygląd komponentu, druga sygnalizuje jego wariant. To czytelniejsze niż osobny zestaw zupełnie niezwiązanych klas dla każdej odmiany karty.
Wybierz konwencję według skali projektu, nie mody
W małym ćwiczeniu wystarczą nazwy takie jak .button i .button-primary. Przy kilku współdzielonych komponentach pomaga BEM lub inna konsekwentna konwencja; w aplikacji korzystającej z CSS Modules nazwy klas mogą być lokalne dla pliku, co ogranicza przypadkowe kolizje.
Jeśli budujesz niewielką stronę, nie wdrażaj rozbudowanej metodologii tylko po to, by nazwy wyglądały „profesjonalnie”. Gdy wiele osób rozwija wspólny interfejs, wybierz jedną zasadę nazewnictwa i trzymaj się jej w nowych komponentach. Najgorszy układ to mieszanka, w której .blue opisuje kolor, .header-item strukturę, a .active stan, bez wspólnego porządku.
Najpierw upewnij się, że klasa trafia w element
Przy problemie ze stylem przejdź krótką ścieżkę: sprawdź zgodność nazwy, obecność klasy na właściwym elemencie, spacje w selektorze i reguły konkurujące o tę samą właściwość. Dopiero potem zmieniaj specyficzność. Taka kolejność często pozwala naprawić CSS bez dokładania kolejnych wyjątków.
Jeśli selektor jest poprawny, ale zmiana wciąż nie działa, panel Styles w DevTools pokaże, która deklaracja wygrywa i skąd pochodzi. Najpierw napraw dopasowanie albo konflikt, a dopiero potem zdecyduj, czy nazewnictwo klas potrzebuje większego porządku.
