Ce fac dezvoltatorii CSS și de ce aveți nevoie de unul

Dezvoltatorii CSS sunt profesioniști web a căror responsabilitate principală este să livreze un produs rafinat și stilat browserului vizitatorului. Practic, fiecare site web folosește CSS, dar CSS nu este adesea considerat un „egal” în stiva modernă de dezvoltare web. Din păcate, această percepție greșită poate duce la ca CSS să fie considerat de la sine înțeles sau chiar trecut cu vederea într-o oarecare măsură.

Permiterea dezvoltatorilor non-CSS să se ocupe de CSS duce adesea la introducerea de hack-uri și erori CSS în codul dvs. și poate provoca frustrare inutilă pentru dezvoltatori. În acest articol, aș dori să îi familiarizez pe toată lumea cu ceea ce cuprinde postul, astfel încât să puteți înțelege mai bine de ce fiecare site are nevoie de un dezvoltator CSS de încredere și profesionist.

Ce fac dezvoltatorii CSS?

Să începem cu elementele de bază. De ce este CSS atât de important și ce anume ar trebui să facă dezvoltatorii CSS?

CSS este un limbaj specific și, ca atare, nu poate exista singur. Este nevoie de HTML pentru a avea sens. Deci, primul lucru pe care îl fac dezvoltatorii CSS este să scrie cod HTML.

Scrierea ordonată HTML contează întotdeauna

Scrierea unui HTML simplu, curat și organizat în mod adecvat este o mare responsabilitate, deoarece documentul HTML umil este primul lucru pe care îl oferiți utilizatorilor finali.

Dacă scrieți un document HTML pregătit pentru producție, ar trebui să încercați să vă asigurați că includeți toate etichetele obligatorii și opționale în capul documentului pentru a profita la maximum de site-ul dvs. Vorbesc despre setarea corectă a tipului de document, a limbii, a metaetichetelor, a favicon-urilor, a tehnicilor de încărcare și a SEO.

Tot ceea ce ar putea ajuta să vă facă site-ul web mai performant, mai accesibil și să ofere mai multă expunere publicului și motoarelor de căutare, precum și altor servicii și instrumente. Nici corpul documentului HTML nu ar trebui să fie umflat. Știind când să folosiți etichete HTML semantice, cum să adăugați atributele HTML necesare și cum să evitați imbricarea profundă sau divita, nu trebuie ignorate, ci mai degrabă implementate de la începutul proiectului. Niciun dezvoltator profesionist nu începe să urmeze cele mai bune practici la jumătatea proiectului, dar chiar și lucruri aparent de bază, cum ar fi HTML, sunt adesea greșite.

Designul general determină adesea modul în care organizăm diferite componente HTML. Dezvoltatorii CSS lucrează îndeaproape cu designerii și nu toți designerii folosesc același instrument pentru a oferi designul. Familiarizarea cu Sketch, Photoshop, InVision sau Figma și posibilitatea de a „slice” designul sunt abilități obligatorii pentru dezvoltatorii CSS. Ar trebui să aveți întotdeauna în vedere modul în care să structurați o componentă pentru a face posibilă aplicarea designului în același timp. Folosirea unei convenții bune de denumire, cum ar fi BEM sau OOCSS, ar trebui să împiedice scrierea codului HTML umflat sau CSS neîntreținut.

JavaScript este peste tot

Unele componente ar trebui să fie interactive, cum ar fi modal sau sfaturi cu instrumente. Acest lucru necesită adesea o bună înțelegere a JavaScript, nu a JavaScript „profund”, ci a evenimentelor JavaScript și a gestionării DOM. Gestionarea DOM ar putea fi dificilă, deoarece nu doriți să epuizați resursele utilizatorului și să vă faceți site-ul lent sau, chiar mai rău, să îl blocați și să nu mai răspundă complet.

Lumea JavaScript evoluează rapid și, uneori, se pare că apar zilnic noi cadre și instrumente. Datorită popularității imense a JavaScript, rămânerea la curent este esențială dacă doriți să utilizați cele mai recente bune practici și să oferiți cea mai plăcută experiență utilizatorilor finali.

CSS

Acest lucru este valabil și pentru CSS, deși mulți ar susține că nu evoluează aproape în același ritm ca JavaScript. Cu toate acestea, noile funcții, cum ar fi variabilele CSS, grila CSS sau chiar Flexbox necesită ceva timp pentru a stăpâni.

Apoi, există suport pentru browser, care poate reprezenta o problemă și astăzi. Site-ul dvs. ar putea arăta ca un milion de dolari într-un browser modern, dar nu atât de mult în browserele vechi. Flexbox ar putea fi acceptat în IE11, dar din nou, s-ar putea să nu funcționeze așa cum era de așteptat. A ști cum să evitați aceste probleme face parte din munca unui dezvoltator CSS.

Din fericire, comunitatea este de mare ajutor, iar site-uri precum Flexbugs sau Gridbugs pot economisi mult timp.

Instrumente, tehnici și principii CSS

Uneori, ne-am putea baza pe instrumente precum aplicații de rulare a sarcinilor sau pachete precum Grunt, Gulp și webpack pentru a ne ajuta să furnizăm cod de încredere. Vă puteți supraalimenta codul cu linters, minifiers, babel sau PostCSS pentru a transpila codul.

Apoi trebuie să luăm în considerare diverse fonturi, tipografie, imagini, pictograme, fonturi pictograme, animații, tranziții și alte aspecte abstracte care fac parte din sarcinile de zi cu zi pentru dezvoltatorii CSS. Fiecare caracteristică are specificul, limitările, problemele și soluțiile sale. Cu cât stăpânești mai multe caracteristici și tehnici, cu atât este mai ușor să stilezi și să implementezi componente în proiectul tău.

Există un număr semnificativ de proprietăți și valori CSS și nu se poate ști totul. Din fericire, instrumentele noastre ne ajută acolo, în special editorii de cod și instrumentele de dezvoltare. Cu toate acestea, nici măcar instrumentele nu pot ajuta la rezolvarea durerilor de cap atunci când trebuie să rezolvați o problemă cu indexul z. Eșecul este cel mai bun mod de a învăța.

Aș spune că acest lucru este valabil mai ales atunci când lucrați cu CSS și de aceea:

Dacă nu ați încercat niciodată să rezolvați problema indexului z, atunci nu ați învăța niciodată despre contextul de stivuire. Dacă nu ați încercat niciodată să suprascrieți clasa Bootstrap, atunci nu veți afla niciodată despre specificitate. Dacă nu ați încercat niciodată să remediați problema plutitorului, nu veți afla niciodată despre modelul cutiei.

Uneori, soluția este simplă, dar doar a pune o întrebare este greu. În comparație cu alte limbi, nu poți întreba de ce bucla mea nu funcționează. Aveți nevoie de contextul complet pentru a rezolva problema în CSS, iar acesta este adesea ceva ce mulți nu înțeleg: cascada .

Cascada este cea mai bună caracteristică din CSS și ar trebui să funcționeze pentru tine, nu împotriva ta. Unii dezvoltatori o ocolesc inventând abordări personalizate precum CSS-in-JS. Dacă vă împachetați CSS-ul în mediul încapsulat precum React, nu îl puteți utiliza în altă parte. Mă îndoiesc că aceasta este abordarea pe care o doriți în platforma dvs. scalabilă. Dacă aveți probleme cu cascada, învață să o îmbrățișezi și apoi învață cum să o îmblânzi.

În timp ce pregăteam acest articol, Max Bock a scris despre mentalitatea CSS și tocmai asta trebuie să facă dezvoltatorii CSS. Dezvoltatorii CSS gândesc în interiorul cutiei, prezic modificările de conținut și evită numerele fixe ori de câte ori este posibil, încercând să scrie cât mai puțin cod posibil, fără a suprascrie valorile implicite și contextul.

De ce aveți nevoie de un dezvoltator CSS?

Majoritatea dezvoltatorilor frontend sau chiar full-stack ar putea scrie codul CSS. Dar nu fiecare dintre ei ar putea remedia fiecare eroare CSS sau implementa designul fără a complica codul HTML sau a se baza pe JavaScript acolo unde nu este necesar.

Un dezvoltator CSS profesionist îi pasă de cod până la detaliile finale, îi place să creeze layout-uri și componente, chiar și pe cele mai complicate și știe cum să rezolve fiecare problemă sau un bug.

Standarde de codare CSS

Înainte de a scrie orice cod, este, în general, o idee bună să aveți câteva reguli de bază despre scrierea codului. Dezvoltatorii CSS ar trebui să respecte standardul de codare - este esențial pentru mentenabilitatea și scalabilitatea proiectului.

Alegeți ce convenție de denumire să utilizați pe parcursul proiectului. Stabilirea devreme a unei convenții de denumire poate ajuta dezvoltatorii să producă cod mai bun și mai organizat. De asemenea, poate ajuta pe toți cei implicați în proiect să înțeleagă structura componentelor și relația dintre componente și elemente citind numai codul HTML.

Decideți cum să gestionați indentarea, tipurile de selectoare, proprietățile scurte, unitățile în CSS. De exemplu, evitați utilizarea unităților de pixeli dacă standardul de codare propune utilizarea unităților rem. Toată lumea are un stil distinct de scriere/codare, dar ca profesionist, trebuie să fiți capabil să adoptați și, mai important, să înțelegeți fiecare concept.

Implementarea designului CSS

Înainte de a converti designul în cod, ar trebui să vă faceți timp pentru a înțelege fiecare pagină, aspect și componentă. Dacă este posibil, disecați fiecare pagină, creați o listă de pagini și componente și încercați să găsiți un model.

Dacă observați o componentă care este prezentă pe mai multe pagini, ar trebui să recunoașteți mediul înconjurător și să încercați să o considerați o componentă de sine stătătoare. Dacă există componente similare, cum ar fi carduri sau liste, ați putea avea o variație a aceleiași componente. În acest fel, puteți reutiliza codul HTML și puteți scrie doar un pic de cod CSS pentru a-l face să pară modificat.

De asemenea, este o idee bună să încercați să găsiți modele în alte zone, cum ar fi tipografia și spațierea. Uneori, acest lucru duce la existența unor clase de ajutor care ar putea fi utilizate în întregul proiect, mai degrabă decât în ​​pagini individuale.

Organizați-vă codul CSS

Dezvoltatorii CSS ar trebui să-și organizeze codul și să creeze o structură semnificativă pentru toată lumea. Când folosesc instrumente precum procesoarele CSS, dezvoltatorii CSS ar trebui să documenteze procesul de generare a codului compilat.

Dacă este necesar, dezvoltatorii CSS pot crea ghiduri de stil. Ghidurile de stil pot fi o referință atunci când creați pagini noi sau decideți cum să le abordați pe cele existente. Sfatul meu este să faceți ghidul de stil disponibil la nivel global pentru întreaga echipă pentru că de multe ori este mult mai ușor să luați o decizie atunci când aveți un context vizual. Ghidurile de stil pot conține palete de culori, reguli de tipografie, standarde de codare și chiar pagini statice. Nu există limite, cu excepția bugetului și a imaginației tale.

Cod CSS în producție

Scrierea codului CSS implică gestionarea problemelor între browsere, erori, animații, tranziții, receptivitate și stiluri de imprimare. Multe dintre aceste funcții nu sunt ușor de gestionat de către dezvoltatorii completi. Aș merge atât de departe și aș spune că acestea sunt sarcinile CSS cele mai puțin preferate în general și nu toți dezvoltatorii știu cum să le gestioneze. Pe de altă parte, dezvoltatorii CSS specializați știu (sau cel puțin ar trebui să știe) cum să producă cod având în vedere fiecare eroare, browser și mediu.

Utilizarea abordărilor moderne este o cale de urmat, dar nu trebuie ignorată nici sprijinirea browserelor mai vechi și respectarea setărilor utilizatorului, cum ar fi mișcările reduse.

Dezvoltatorii CSS scriu și cod HTML și JavaScript. Aceasta înseamnă că livrarea activelor este responsabilitatea dezvoltatorului CSS. Dezvoltatorii CSS ar trebui să fie responsabili pentru încărcarea fonturilor, extragerea CSS critice, utilizarea încărcării JavaScript amânate și asincrone și furnizarea de imagini receptive.

Niciuna dintre aceste tehnici nu este ușor de implementat și nu există niciun glonț de argint.

Ce pot face dezvoltatorii CSS pentru tine

Toate cele de mai sus explică de ce aveți nevoie de un dezvoltator CSS dedicat. Iată doar câteva dintre lucrurile cruciale pe care le gestionează:

• Asigurați-vă că fiecare membru al proiectului respectă standardul de codare
• Proiectarea implementării
• Organizați codul
• Scrie codul
• Remediați erori
• Aflați despre noi tehnici
• Îmbunătățiți codul

Încheierea

Prea mult timp, problema existenței și importanței rolului dezvoltatorilor CSS a încurajat discuții nu deosebit de constructive și bine intenționate. Să încercăm să fim de acord și să recunoaștem dezvoltatorul CSS ca un rol adecvat odată pentru totdeauna.

În articolul său, The Great Divide , Chris Coyier îi citează pe câțiva dintre liderii tehnologiei și cei mai mulți dintre ei sunt de acord că ar trebui să existe o divizare, ar trebui să existe un rol bazat pe CSS care să nu necesite cunoașterea cadrelor JavaScript moderne. Ar putea ajuta dacă știi mai mult decât „doar CSS”, dar rolul ar trebui să existe și ar trebui acceptat ca fiind egal cu rolurile bazate pe JavaScript.

La urma urmei, vrei să-ți lași produsul în mâinile unui profesionist specializat care l-ar putea lustrui la perfecțiune sau te-ai mulțumi cu destul de bine ?

Citiți suplimentare pe blogul Toptal Engineering:

• Cum să abordați animațiile SVG în CSS