Standardowa sytuacja w pracy front-end developera. Włączasz komputer, zaczynasz stylować jakiś element i … nie działa. Wielu młodych developerów, zamiast rozwiązać problem samemu, zwykle po 15 minutach zakłada temat na forum. :) Zamiast to robić, znacznie lepiej jest samodzielnie zdebugować.
Poniżej lista podpowiedzi, dlaczego Twój CSS nie działa.
- Plik CSS nie jest podpięty do arkusza HTML - sprawdź, czy edytor tekstu nie podświetla Ci, że "nie znaleziono folderu" (jeśli ma taką opcję). Narzędzia developerskie powinny pokazać błąd.
- Plik CSS znajduje się w innym folderze - postępowanie jak powyżej.
- Masz dobrze podpięty plik CSS, ale edytujesz inny - wtedy błąd się nie pokaże. Przeanalizuj strukturę projektu.
- Nie zapisałeś CSS lub odpowiedniego elementu HTML, który go linkuje. Często się to zdarza, gdy pracujesz na kilku plikach równocześnie.
- Style umieszczone w nieprawidłowym miejscu (np między <body></body> i <head></head>
- Masz podpięty arkusz normalize.css lub reset.css, który dodaje własne ustawienia i nie pamiętasz o nim.
- Oglądasz zcachowaną wersje strony. Wyłącz cache w przeglądarce i odśwież za pomocą ctrl + f5.
- Masz włączoną w przeglądarce niewłaściwą wersję strony - często tak się zdarza, gdy podglądasz stronę na przykład na działającej wersji lub na GitHub Pages, a potem zapomnisz przejść na wersję, na która pracujesz. Baardzo częsty powód.
- Używasz niewłaściwego selektora lub zestawu selektorów, czyli nie wskazujesz w CSS odpowiedniego elementu.
- Twoje selektory są za mało specyficzne. Podstawą pracy z CSS jest znajomość specificity i odpowiednie wykorzystywanie tej własności. Więcej na ten temat np na MDN
- Nadużywasz !important, stylowania inlinowego lub (o zgrozo), stylowania w samym HTML za pomocą takich znaczników, jak <font>. Świadczy to o złym planowaniu i tworzeniu projektu. Pamiętaj o tym, że !important można nadpisać bardziej specyficznym selektorem z !important, co przydaje się na przykład w przypadku pracy z pluginami.
- Zapominasz o stawianiu średników w odpowiednich miejscach w arkuszu.
- Używasz selektorów, które nie istnieją - przeglądarka powinna wyrzucić błąd.
- Podwójne deklarowanie stylów tego samego elementu - niektóre edytory pokażą, że to błąd
- Używasz margin-top/margin bottom dla elementu inlinowego
- Próbujesz dodać margines górny dla dolnego elementu i margines dolny, dla górnego - w takiej sytuacji, zadziała tylko jeden z nich.
- Nie działa tło w elemencie nadrzędnym, ponieważ floatujesz elementy w jego wnętrzu.
- Plik się nie kompiluje
- Pliki kompilują się do niewłaściwego folderu (trzeba wskazać odpowiednie lokalizacje)
- Masz błąd w składni SCSS (na szczęście SASS wyrzuca wtedy błąd)
Problemy w projekcie
Problem z przeglądarką
Problemy ze selektorami i samym arkuszem
Częste problemy wynikające z braku zrozumienia CSS
Problemy z SASS
Podsumowanie
Jeśli znasz inne powody, dla których style mogą nie działać, pisz śmiało w komentarzu.
PS - nie ma chyba gorszego edytora, niż ten wbudowany w Bloggera. Nawet, jeśli wpiszemy poprawny kod w widoku HTML, ten zmieni go na inny :(
autor zapomniał o jednej ważnej rzeczy - jeśli CSS nie działa, warto go przepuścić przez CSS Linter, który pokaże nam jego błędy. Niektóre IDE mają go wbudowanego
OdpowiedzUsuń