de ZAYDEK

Designerii îl urăsc! ?

Aflați acest lucru ciudat? Trick To Debug CSS

* Nu clickbait *

Înainte de a ajunge la articol, vreau doar să vă spun că construiesc un produs și mi-ar plăcea să colectez câteva date despre cum să servesc mai bine dezvoltatorii web. Am creat un chestionar scurt pentru a verifica înainte sau după citirea acestui articol. Vă rugăm să verificați – mulțumesc! Și acum, înapoi la programarea noastră obișnuită programată.

Salut! ? Sunt Zaydek! Când am început să învăț cum să creez site-uri web, a fost mult mai dureros decât se anticipase. La urma urmei, sunt un designer grafic și programator cu experiență – cum ar putea fi site-urile webpălărie greu?

În acest articol, detaliaz deciziile care m-au determinat să creez un depanator CSS.

Aflati acest lucru ciudat Trick To Debug CSS
Click aici să se deschidă în Scrimba

Am predat și un curs HTML / CSS gratuit pe Scrimba unde învăț cum să construiești un blog frumos de la zero. Faceți clic aici pentru a vă înscrie! ?

Scrimba.com este o platformă interactivă frontală în care site-urile web sunt înregistrate ca evenimente – nu videoclipuri – și pot fi editate! ?

Ce este un depanator?

Există o citată minunată a lui Donald Knuth despre depanare. Pentru a parafraza, merge așa ceva.

Cineva: „Care este cel mai bun limbaj de programare?”

Donald Knuth: „Care are cel mai bun depanator?”

Nu am ajuns să apreciez această idee până la CSS. Limbajele de programare au acest caracter rezonabil în legătură cu ele, unde logica depășește opinia. Dar CSS este diferit, deoarece CSS „se simte” avizat.

Deci ce putem face? Ei bine, putem asculta sfaturile bune ale lui Donald Knuth și putem folosi un depanator!

În cazul în care un limbaj de programare este un instrument, un instrument de depanare este un instrument pe care îl putem folosi pentru a înțelege instrumentul nostru – codul nostru. Nu tuturor comp-sci folk le plac depanatorii și înțeleg asta.

Nu faceți computerul să facă ceea ce noi nu înțelegem. Cred că există merit în acest sens, dar despre ce vorbesc aici este o structură revelatoare unde altfel era invizibilă.

Luați următoarele:

1612170247 655 Aflati acest lucru ciudat Trick To Debug CSS
Click aici să se deschidă în locul de joacă al Scrimba

Ce putem face pentru a vedea structura site-ului nostru web? Iată două soluții de care sunt conștient: putem face reguli CSS unice pentru a sublinia un element sau putem folosi instrumentele de depanare Chrome, Firefox sau Safari. Dar asta e încă mai mult sau mai puțin o soluție unică. Avem nevoie de un general soluţie.

Depanatorul nostru

Nu cu mult timp în urmă proiectam acest antet și nu era simplu. Intenția era să plasați o imagine peste textul cu mai multe linii. Ar trebui să fie simplu, nu?

Ei bine, CSS este antagonistul? Aici. Ceea ce altfel ar fi simplu în Photoshop poate fi călătoria unui erou în CSS, iar acest lucru m-a determinat să experimentez cu outline:

* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }
1612170248 894 Aflati acest lucru ciudat Trick To Debug CSS
Click aici să se deschidă în locul de joacă al Scrimba

Nimic prea special – doar linii de culoare alb-moale. Cu toate acestea, ceea ce avem este o regulă care se aplică tuturor elementelor atâta timp cât folosim un * și nu numele id, class, sau element.

Cu toate acestea, introducerea * { … } a fost profund pentru mine. M-am gândit: „Unde n-aș vrea asta?” Așa că am adăugat câteva linii și am dezvoltat un depanator mai formal:

* {    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;}
1612170248 727 Aflati acest lucru ciudat Trick To Debug CSS
Click aici să se deschidă în locul de joacă al Scrimba

Mult îmbunătățit! Aici am creat un aspect schematic pentru site-ul nostru. Am avut grijă să nu folosesc culori solide, dar în schimb am ales culorile moi sau culorile cu un canal alfa, astfel încât elementele imbricate să apară în culori mai profunde, cu mai albastru blues și mai albă albi. Am adăugat și eu !important din cauza infamei CSS Războaiele de specificitate.

Ceea ce se poate simți uneori ca CSS înșurubând cu noi este cum și când se aplică cascada. Adică, „Cum se face că stilurile sunt uneori aplicate și alteori nu?”

Acesta nu este CSS-ul lui Schrodinger, este matematică simplă. CSS folosește un calculator simplu pentru a determina care reguli sunt mai specifice și rezultatul determină dacă se aplică sau nu CSS.

1612170249 757 Aflati acest lucru ciudat Trick To Debug CSS
Un implementare a calculatorului de specificitate CSS

Mama tuturor specificităților este !important, care suprascrie toate regulile inline, ID-urile, clasele și elementele. Este ca Steaua Morții în comparație cu Imperiul. În ciuda faptului că utilizarea !important este descurajat în general, este perfect pentru un depanator – pentru că nu vom livra site-ul nostru web cu acesta „pornit”. În schimb, folosim depanatorul doar în proiectarea și dezvoltarea site-ului nostru web.

Cu cât am folosit mai mult depanatorul, cu atât am realizat că folosind *:not(path):noth(g) deoarece selectorul a fost preferat. În acest fel, nu aș obține linii străine din grafica vectorială. De asemenea, am observat că dezactivarea box-shadow a fost mai curat, deoarece depanatorul nu are nevoie de un sentiment de profunzime.

Deci, iată depanatorul final:

*: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;}
1612170249 869 Aflati acest lucru ciudat Trick To Debug CSS
Click aici să se deschidă în locul de joacă al Scrimba

cred noi oamenii urăsc ceea ce noi nu înțelegem. Și CSS nu face excepție. Este caracterizat greșit pentru că este înțeles greșit. Eu propun: gândiți-vă la CSS ca la o sabie cu două tăișuri. Poate fi folosit atât pentru a construi, cât și pentru a deconstrui site-uri web. Da, CSS nu este Photoshop, dar asta nu înseamnă că nu poate face lucruri pe care Photoshop nu le poate face. Crearea propriului nostru depanator este un lucru noi poate sa do.

Cum se folosește acest depanator?

  1. Mergi la zaydek.github.io/debug.css
  2. Marcare „Depanare CSS” (cod sursă aici)
  3. Faceți clic pe marcaj pentru a-l comuta * pe * și * dezactivat *?
Aflati acest lucru ciudat Trick To Debug CSS

Nu uita curs HTML / CSS gratuit pe Scrimba unde învăț cum să construiești un blog frumos de la zero. Faceți clic aici pentru a vă înscrie! ?

Aflati acest lucru ciudat Trick To Debug CSS