Moje najgłupsze błędy CSS

Opublikowane ponownie przez Plato

Obserwuje: 0

Wszyscy popełniamy błędy w naszym kodzie. Zdarza się! Wiem, że gdybym miał jeden z tych napisów „Dni od ostatniego błędu” wiszący nad moim biurkiem, wielkie, stare gęsie jajko unosiłoby się nade mną cały czas. Nie muszą to być też duże błędy. Mój niezdarny ja popełnił małe błędy w repozytoriach, od literówek po kompletne katalogi modułów npm.

Ups.

To jedna z rzeczy, które naprawdę kocham w CSS: jest wyrozumiały jak cholera. Jeśli nie zrozumie literówki, wciąż sprawdza kaskadę w poszukiwaniu dopasowania. Żadna z tych rzeczy, w których jedna z postaci nie na miejscu psuje witrynę i nie bierze jeńców. Ale nadal jest to zawstydzające, gdy pojawiają się błędy CSS!

Podobnie jak ten, robię o wiele więcej razy, niż chciałbym przyznać:

.element {
  display: flexbox; /* 🤦‍♂️ */
}

Lub kiedy próbuję ustawić gradient bez background własność:

.gradient {
  linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}

nienawidzę jak blisko X i C są na klawiaturze, bo nie umiem zliczyć ile razy przebijam się przez coś i pomyłka px dla pc jednostek.

.element {
  font-size: 16pc; /* I meant pixels! */
}

Innym błędem CSS, który często łapię, jest ten, który popełnia wielu innych ludzi, ponieważ zbyt często dostrzegam go w postach na blogu z fragmentami kodu:

// This is not a CSS comment.
.element {
  /* This is a CSS comment. */
}

Czy kiedykolwiek zapomniałeś użyć? var() wokół zmiennej CSS? Na pewno mam.

.element {
  color: --primary-color;
}

Mówiąc o zmiennych CSS, nazywanie ich jest trudne (jak wszystko inne) i często używam niepoprawnej wersji zmiennej, którą nazwałem!

:root {
  --color-primary: #FF5722;
  --color-secondary: #3E2723;
}

/* Much later on... */

.element {
  color: var(--primary-color); /* 🙃 */
}

Tak, rzeczywiście skopiowałem fragment kodu CSS, aby tylko fantazyjne cytaty przeszkadzały w jego działaniu:

.element::before {
  content: “”; /* Should be "" */
}

I tak, zbyt długo zastanawiałem się, czy te cytaty były winowajcą.

Patrzenie na tę ostatnią przypomina mi, że czasami zapominam ustawić content nieruchomość, kiedy pracuję ::before or ::after. Co przypomina mi, jak zapomniałem ustawić element position zanim spróbujesz to zrównoważyć lub zmienić jego z-index. Poważnie, takie rzeczy się zdarzają!

Trudno mówić o błędach

Czy kiedykolwiek skończyłeś czytać jakiś post na blogu, dzieląc się jakąś niesamowitą sztuczką i poczułeś jakiś syndrom oszusta? Myślę, że dzieje się tak głównie dlatego, że posty na blogach często maskują prawdziwą pracę – i niepowodzenia – które wchodzą w niesamowite sztuczki. Jako ktoś, kto zarabia na życie, czytając takie posty, mogę powiedzieć, że wielu, jeśli nie zdecydowana większość, przechodzi przez wiele rund edycji, w których potencjalnie wstydliwe błędy są usuwane i wygładzane.

Nawet te absurdalnie niesamowite artykuły muszą zawieść, zanim dostaną je wszystkie oooo! i aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.

To samo dotyczy każdej aplikacji, strony internetowej, wersji demonstracyjnej lub czegokolwiek, co napotkasz. Szanse, że któryś z nich wyjdzie idealnie za pierwszym razem, są znikome.

Ale jeśli jestem z tobą całkowicie szczery, często jestem bardziej zdumiony (i zainteresowany) podróż trzeba coś osiągnąć, brodawki i wszystko inne. Podróż jest wglądem w to, jak to jest myśl jak front-end developer. To tam dzieje się prawdziwa (i najbardziej wartościowa) nauka.

A wszystko to tylko buduje to, o co naprawdę chcę zapytać…