Toată lumea vorbește despre „sfaturi” și „sfaturi pro” pentru a scrie CSS grozav.

Este în regulă, dar poate să vezi cum arată CSS rău îți va oferi o perspectivă diferită. Heck, s-ar putea chiar să-ți facă un bine!

Permiteți-mi să vă duc într-o călătorie despre cum să scrieți CSS foarte rău.

Gata?

Cum se scrie CSS cu adevarat teribil

Notă: chiar dacă jurați pe CSS-in-JS și nu vă place CSS-ul vanilat, suntem cu toții de acord asupra lucrului: cu toții trebuie totuși să cunoaștem niște CSS …

Deci, indiferent dacă scrieți CSS sau unele superseturi cum ar fi SASS, sau doar CSS-în-JS, veți beneficia în continuare de a ști exact cum arată CSS rău.

ad-banner

Cine scrie comentarii? Nimeni.

1611237726 779 Cum se scrie CSS cu adevarat teribil
Fara comentarii? Codul real pe care l-am scris cu ceva timp în urmă, dar am eliminat toate comentariile?

Este atât de ușor să aluneci aici încât nu vei observa foarte repede.

Știm cu toții. Ești atât de deștept, încât toți ceilalți nu se apropie. Chiar dacă CSS nu este cea mai expresivă dintre „limbi”, puteți face presupuneri despre ciudățenii browserului, le puteți remedia și puteți presupune că veți înțelege ceea ce ați făcut câteva săptămâni.

Cât de inteligent, nu?

Lasă-ți mândria deoparte și salvează-ți stresul pe tine și pe ceilalți colegi de echipă.

Dacă utilizați o tehnică nu atât de evidentă sau dacă ați remediat o ciudățenie a browserului sau orice altceva credeți că nu este suficient de expresiv, scrieți acel comentariu! Nu doare.

Țara Selectorilor Complexi

1611237727 444 Cum se scrie CSS cu adevarat teribil

Da! Tocmai ai învățat CSS și te simți în vârful lumii. Deci, timpul pentru a arăta niște mușchi selectori.

Mișcare proastă.

Făcând selecții cu prea multe selectoare CSS, este posibil să fi făcut CSS extrem de greu de menținut. Acum depinde foarte mult de structura HTML a aplicației dvs.

Dacă structura marcajului se schimbă ușor, trebuie să refaceți și CSS-ul. Nu este cel mai simplu flux de lucru.

Doar adăugați o clasă la element și continuați cu viața!

Chiar și în scenarii în care trebuie să calificați selectorii cu mai multe clase, favorizați întotdeauna simplitatea.

Simplul este bun, aproape întotdeauna!

Performanţă? Șterge asta!

1611237727 238 Cum se scrie CSS cu adevarat teribil

Deci, am înțeles. Pur și simplu nu vă pasă de performanță. Nu vă pasă de afacere, în mod clar. Dacă ați face-o, nu v-ați enerva utilizatorii cu selectoarele dvs. neperformante teribile.

Dar asteapta…

Înțeleg că computerele au crescut mai repede și browserele continuă să fie optimizate. Indiferent, selectoarele simple ar trebui să fie întotdeauna preferate, iar înțelegerea modului în care browserul parcurge DOM pentru a găsi selectorul dvs. este încă un lucru!

Șansele sunt să citiți selectorii de la stânga la dreapta.

Cu toate acestea, browserul se potrivește cu selectoarele de la dreapta la stânga, deci poate elimina elementele care nu se potrivesc cât mai repede posibil.

Dacă ați ști acest lucru, probabil că ați fi mai îngăduitor cu browserele. Ei merită dragostea ta.

Având în vedere exemplul grafic de mai sus, browserul se va potrivi cu toate elementele bodyși, de asemenea, verificați dacă sunt descendenți ai

body * {  ... } 

. <boDar de ce? Aproape fiecare element vizibil este ideal un descendent al

dy> element. Aceasta este doar o verificare ineficientă inutilă.

Suge la denumirea lucrurilor, așa că nici măcar nu mă deranjez.

Există doar 2 lucruri grele în informatică. Denumirea lucrurilor și …

Da, cred că ai auzit deja asta undeva. Numirea lucrurilor poate fi dificilă, dar asta nu înseamnă că nu trebuie să le gândiți sau să mergeți complet criptic.

.u {  font-size: 60rem;}

Mă îndoiesc că există vreo situație în care are sens să folosești litere simple ca nume de clasă.

.former-black-now-red-paragraph {  color: red;}

Și ce zici de numele claselor super-specifice?

Nici aceia nu fac bine.

Deși numele pare să transmită un anumit sens, este foarte probabil că ați rupt o mare parte din reutilizarea clasei. Care, apropo, este principalul motiv pentru care avem cursuri. red Acum, dacă vrei să dai un stil obișnuit

paragraful, numele anterior este atât de specific, încât nu ar avea sens.

Folosiți nume semnificative, dar pur și simplu nu exagerați.

1611237728 516 Cum se scrie CSS cu adevarat teribil
Am auzit că orele au fost grozave. Folosește-le excesiv!

hmmm…. Când este posibil, evitați clasele supra modularizate

Cursurile sunt grozave și toată lumea le iubește. Dar, la fel ca în orice altceva, prea mult din ceva este în general o idee proastă.

Vedeți, dacă un grup de clase vor fi utilizate în mare parte împreună, grupați-le într-o singură clasă.

Când alegeți să grupați aceste clase este probabil subiectiv. Dacă construiți un fel de bibliotecă atomică, s-ar putea să tindeți spre acest lucru.

Dacă scrieți o aplicație mare, este mai bine să grupați clasele într-un mod semnificativ, spre deosebire de a avea o mulțime de clase pe un singur element.

Când este posibil, evitați clasele supra modularizate.

Sunt purist CSS. Nu fac SASS, LESS, etc.

Ești purist CSS, eu sunt purist CSS, amândoi suntem puriști. Să scoatem asta din cale.

Acum, până la osul certurilor. Există cu siguranță cazuri de utilizare în care scrierea CSS de vanilie este grozavă! De exemplu, dacă nu folosesc un CSS-în-JS soluție pentru a mea Reacţiona

proiecte, aș putea decide să merg pe calea CSS pură. Nu doare.

Cu toate acestea, dacă scrieți o aplicație mare cu o tonă de CSS de vanilie care zboară, pariez că introducerea unui preprocesator CSS va face dezvoltarea dvs. mai interesantă și va contribui la o bază de cod CSS mai întreținută.

Din nou, nu spun că folosiți preprocesoarele de fiecare dată. Spun că nu închideți doar această opțiune. Te-ar putea salva! Ai multe Important

1611237728 308 Cum se scrie CSS cu adevarat teribil

Stil acolo!

Urăsc CSS. Pur și simplu nu funcționează niciodată. Deci, care este soluția? !important Au o grămadă de

peste tot când trebuie să anulez orice declarații. Haha! !important Deși acest lucru sună ca un plan decent pentru sinele tău leneș, supra-folosește

regula va avea ca rezultat doar un document CSS foarte greu de menținut. !importantData viitoare când trebuie să o folosești , fii sigur

nu o faceți pentru că sunteți prea leneși pentru a vă rezolva problemele în cascadă.

CSS nu este atât de rău. Îmbrățișează-l.

Doriți să scrieți CSS mai bun? Am creat un ghid CSS gratuit pentru a vă dezvolta abilitățile CSS imediat.Obțineți cartea electronică gratuită

1611237729 380 Cum se scrie CSS cu adevarat teribil
.