10 Principii pentru a scrie cod curat

iNoob | Stefanescu Mihai | 2020-10-11

---

Codul scris curat este fundatia unui website reusit. Cand vorbesc cu cineva despre CSS spun intotdeauna ca un CSS bun poate exista doar in combinatie cu HTML bun. O casa este atat de rezistenta pe cat este fundatia,nu?

 1.DOCTYPE Strict

Daca vrem sa scriem cod curat hai sa il scriem bine. Nu avem nevoie de discutii legate de ce sa folosim, HTML 4.01 sau XHTML 1.0.

Codul nu contine tabele pentru structura, deci nu avem nevoie de un DOCTYPE transitional .

2.Setarea caracterelor &

In sectiunea

, in primul rand trebuie sa declari setul de caractere ce urmeaza sa fie folosit. Acum vom folosi UTF-8, care va fi listat dupa tag-ul. Acum hai sa mutam codul mai sus, asfel incat browser-ul sa stie cu ce set de caractere are de-a face inainte sa inceapa sa citeasca continutul.

Cat timp vorbim despre caractere hai sa ne asiguram ca orice carcatere speciale am encoda sunt afisate corespunzator. Avem un ampersant in titlu, iar pentru a eventualele interpretari gresite ale browser-ului il vom converti in &

3.Spatiere corespunzatoare

Ok, am scris vre-o 3 linii si deja sunt incurcat de lipsa spatierii necorespunzatoare. Spatiere nu are nicio treaba cu modul in care codul va fi afisat, dar are un efect uimitor la lizibilitatea codului. Spatierea standard este un tab (sau cateva spatii) inaintea fiecarui element ce este scris intr-un alt element.

Regulile de spatiere nu sunt batute in piatra, esti liber sa iti inventezi propriul sistem. Dar va recomand sa avetio consistenta in ceea ce alegeti. Spatierea bine aranjata te ajuta sa gasesti erorile mai repede si sa intelegi mai usor codul.

4. Tine-ti CSS-ul si JavaScriptul Extern

Avem o bucata de CSS in tag-ul

al site-ului, de ce este gresit? Pe langa faptul ca nu este recomandat sa avem css-ul si html-ul la un loc acesta nu poate fi aplicat decat paginii in cauza. Un CSS extern poate fi folosit pe mai multe pagini,iar daca ne hotaram sa schimbam o anumita culoare in design nu trebuie sa schimbam pe toate paginile, ci doar in fisierul css.

Chiar daca uneori ne este mult mai usor sa scriem un cod css in head pe viitor ne va fi mai greu sa editam fisierele daca toate au codul scris asa. Chiar daca nu am mai scris niciun JavaScript mai sus acelasi principiu se aplica si acolo.

5. Aranjarea tag-urilor

Sa presupunem ca titlul site-ului este “Site-ul cu Pisici”, pus intre tag-uri <h1> (ceva absolut normal).

Si conform regulilor de bun simt, titlul are un link catre pagina de start a siteului. In fine, link-ul ancora <a> este pus in jurul tag-ului de header. O greseala minora. Majoritatea browserelor vor intelege ce vrei tu sa faci acolo, dar din punct de vedere tehnic nu este recomandat. Un element ancora <a> este un element inline, iar un heading <h1> este un element de tip block. Blocurile nu ar trebuii sa fie scrise in interiorul unui element inline.

6.Elimina div-uril inutile

Nu stiu cine a inventat termenul “divitis” care se refera la folosirea in exces a div-urilor intr-un fisier HTML. In unele stagii ale invatarii Designului Web, oamenii sunt invatati cum sa bage toate elementele intr-un div astfel incat sa le poata aranja cu CSS. Asta ii face pe oameni sa puna toate elementele in alete div-uri de mai multe ori, lucru care evident duce la suprafolosirea div-urilor.

In exemplul de mai sus avem un div (“TopNav”) ce este pus in jurul unei liste neordonate (“bigBarNavigation”).Atat div-ul cat si lista sunt elemente de tip block, deci nu avem niciun motiv sa pastram si div-ul cand deja avem un element de tip block pentru ca orice vrei sa faci cu acel div poti face la fel de bine si cu lista.

7.Foloseste nume bune

Acesta este momentul perfect sa discutam si despre conventia numelor, daca tot am adus in discutie id-urile (“bigBarNavigation”) mai sus. “Sistem Navigare”, are sens, este un nume ce descrie obiectul in cauza, dar cand am scris “big” si “Bar” in numele de mai sus nu ma refeream la continut ci la design. Acest nume are sens daca sistemul de navigare al site-ului este un meniu de tip bara mare, dar daca am avem un meniu vertical nu ar mai avea sens.

Clasele si id-urile bune au nume precum “MeniuPrincipal”, “SubMeniu”, “MeniuLateral”, “footer”, “metaData”, chestii care sa descrie continutul. Numele prost alese sunt cele ce descriu designul, chestii ca: “TitluIngrosatAlbastru”, “MeniulDinStanga”, “CutieRosie”, s.a.m.d.

8.Tipografia din CSS

Din cate se vede, am ales sa nu folosesc texte scrise doar cu majuscule, pentru ca am considerat ca nu s-ar potrivi acestui design care inca este in starea de proiect. Insa am ales ca majoritatea elementelor ca inceapa cu majuscula si ca continue cu litere mici si am facut asta doar din CSS. Da, putem face acest lucru cu mare usurinta ({text-transform: capitalize;}). Asta inseamna ca daca ne hotaram sa schimbam designul site-ului si anumite parti ale continutului ar arata mai bine scrise in intregime cu majuscule putem schimba decat in css ({text-tranform: uppercase;}) fara sa editam fiecare pagina a site-ului.

9. Validare

Asta ar trebuii sa vina de la sine, dar totusi am sa o mentionez, pentru ca multi o uita. Te gandesti ca validarea nu iti indica decat micile greseli si nu le iei in serios oricum, dar unele dintre aceste “mici greseli” sunt destul de importante.

Dar daca nu vrei sa validezi codul pentru greseli mai bine il validezi pentru a te bucura ca ti-a aparut textul verde in validatorul W3C.

10.Aranjare Logica

Daca este posibil tine-ti diferitele sectiuni ale website-ului intr-o oarecare logica.Cat se poate de lizibil, atat cand este vorba de css cat si atunci cand este vorba de HTML.

Concluzia?

Am acoperit o multime de subiecte aici, ceea ce este un inceput grozav in scrierea de HTML, dar sunt mult mai multe chestii pe care ar trebuii sa le stii. Cand lucrezi la ceva de la 0 totul pare atat de simplu, dar cand lucrezi la un cod scris de altcineva pare mult mai greu. Chiar daca faci greseli nu trebuie sa te panichezi, incearca sa faci ceva chiar daca nu iti iese cum trebuie, incearca si a doua oara, si asa mai departe pentru ca asa vei invata din greseli.