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艅