Lær denne underlige? Trick til fejlretning af CSS

Designere HADER ham! ?

Lær denne underlige? Trick til fejlretning af CSS

* Ikke clickbait *

Før jeg kommer til artiklen, vil jeg bare fortælle, at jeg bygger et produkt, og jeg vil meget gerne samle nogle data om, hvordan man bedre kan betjene webudviklere. Jeg oprettede et kort spørgeskema til at tjekke ud før eller efter at have læst denne artikel. Tjek det venligst - tak! Og nu, tilbage til vores regelmæssige planlagte programmering.

Hej! ? Jeg er Zaydek! Da jeg først gik ud for at lære at oprette websteder, var det langt mere smertefuldt end forventet. Efter alt, er jeg en erfaren grafisk designer og programmør - hvordan kunne hjemmesider være t hat hårdt?

I denne artikel beskriver jeg de beslutninger, der fik mig til at oprette en CSS-fejlfinding.

Jeg underviste også i et gratis HTML / CSS-kursus på Scrimba, hvor jeg lærer at opbygge en smuk blog fra * bund *. Klik her for at tilmelde dig! ?

Scrimba.com er en interaktiv frontend-platform, hvor websteder registreres som begivenheder - ikke videoer - og kan redigeres! ?

Hvad er en debugger?

Der er et stort citat fra Donald Knuth om debugging. For at omskrive, går det noget som dette.

Nogen: “Hvad er det bedste programmeringssprog?” Donald Knuth: “Hvilken har den bedste fejlretning?”

Jeg kom ikke til at værdsætte denne idé før CSS. Programmeringssprog har denne rimelighed omkring dem, hvor logik overstiger mening. Men CSS er anderledes, fordi CSS “føler sig” meningsfuld.

Så hvad kan vi gøre? Nå, vi kan lytte til Donald Knuths gode råd og bruge en debugger!

Hvor et programmeringssprog er et værktøj, er en debugger et værktøj, som vi kan bruge til at forstå vores værktøj - vores kode. Ikke alle comp-sci-folk kan lide debuggere, og jeg forstår det.

Lad ikke computeren gøre, hvad vi ikke forstår. Jeg tror, ​​der er fortjeneste i dette, men det, jeg taler om her, er afslørende struktur, hvor den ellers var usynlig.

Tag følgende:

Hvad kan vi gøre for at se vores websteds struktur? Her er to løsninger, jeg er opmærksom på: vi kan lave engangs-CSS-regler for at understrege et element, eller vi kan bruge Chrome-, Firefox- eller Safaris Debugger-værktøjer. Men det er stadig mere eller mindre en engangsløsning. Det, vi har brug for, er en generel løsning.

Vores debugger

For ikke længe siden designede jeg dette header, og det var ikke simpelt. Hensigten var at svæve et billede over tekst med flere linjer. Skal være simpelt, ikke?

Nå, CSS er antagonisten? her. Hvad der ellers ville være simpelt i Photoshop kan være en heltes rejse i CSS, og dette førte mig til at eksperimentere med outline:

* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }

Intet for specielt - bare bløde-hvide linjer. Det, vi har, er imidlertid en regel, der gælder for alle elementer, så længe vi bruger en *, og ikke navnet på den id, classeller element.

Alligevel var introduktionen af ​​den * { … }dyb for mig. Jeg tænkte: "Hvor ville jeg ikke have det?" Så jeg tilføjede et par flere linjer og udviklede en mere formel debugger:

* { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;}

Meget forbedret! Her har vi skabt en skematisk følelse af vores hjemmeside. Jeg var omhyggelig med ikke at bruge solide farver, men valgte i stedet bløde farver eller farver med en alfakanal, så indlejrede elementer fremtræder dybere i farve med blåere og hvidere hvide. Jeg tilføjede også på !importantgrund af de berygtede CSS Specificity Wars.

Hvad der undertiden kan føles som CSS at skrue med os, er hvordan og hvornår kaskaden gælder. Det vil sige "Hvordan er det, at stilarter undertiden anvendes og nogle gange ikke?"

Dette er ikke Schrodingers CSS, det er simpel matematik. CSS bruger en simpel lommeregner til at bestemme, hvilke regler der er mere specifikke, og resultatet afgør, om CSS anvendes eller ej.

Moderen til al specificitet er !important, som tilsidesætter alle integrerede, ID'er, klasser og elementregler. Det er ligesom Death Star sammenlignet med Empire. På trods af det faktum, at brugen af !importantmodvirkes generelt, er det perfekt til en debugger - fordi vi ikke sender vores websted med "tændt". I stedet bruger vi debuggeren kun til design og udvikling af vores websted.

Jo mere jeg brugte debugger, jo mere indså jeg, at *:not(path):noth(g)det var at foretrække at bruge som vælger. På denne måde ville jeg ikke få fremmede linjer fra vektorgrafik. Jeg bemærkede også, at deaktivering box-shadowvar renere, da fejlfinderen ikke har brug for en dybdefølelse.

Så her er den sidste debugger:

*:not(path):not(g) { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
 box-shadow: none !important;}

Jeg tror, ​​at vi mennesker hader det, vi ikke forstår. Og CSS er ingen undtagelse. Det er forkert karakteriseret, fordi det misforstås. Jeg foreslår: tænk på CSS som et tveægget sværd. Det kan bruges til både at konstruere og dekonstruere websteder . Ja, CSS er ikke Photoshop, men det betyder ikke, at det ikke kan gøre ting, som Photoshop ikke kan. Oprettelse af vores egen debugger er en ting, vi kan gøre.

Hvordan bruges denne debugger?

  1. Gå til zaydek.github.io/debug.css
  2. Bogmærke "Fejlret CSS" (kildekode her)
  3. Klik på bogmærket for at skifte det * til * og * fra *?

Glem ikke det gratis HTML / CSS kursus på Scrimba, hvor jeg lærer at opbygge en smuk blog fra * bund *. Klik her for at tilmelde dig! ?