Kako napisati čitljivo HTML in CSS kodo?

Ste že kdaj napisali svojo spletno stran? Ste čez nekaj časa to spletno stran tudi obnavljali ali spreminjali? Ker kot razvijalci poznamo ta občutek, kako fino je čez kakšno leto ali dve pogledati lastno kodo in se vrniti na začetek, ter to kodo nato tudi popraviti ali prirediti do mere, ki izpolnjuje naše ali naročnikove zahteve, moramo paziti na čitljivost in dokumentiranost kode. Pri izdelavi spletnih strani je to velikega pomena, saj spletno stran običajno sestavljajo različni HTML elementi, ki so vezani na ločene CSS in JavaScript-opise. To pa še ni vse; običajno vključimo v to zmedo še nekaj JavaScript-knjižnic ali ogrodij, ki so jih razvili drugi razvijalci. Da bomo vse opisano čim bolj enostavno odpravili, se moramo držati nekaterih dobrih praks čitljive HTML in CSS kode. Naj opišemo nekatere izmed številnih dobrih praks pri razvoju z opisnim jezikom HTML.

Pišite skladno s standardi HTML in sproti preverjajte skladnost kode.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Izkoristite pomen elementov.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Uporabljajte ustrezno dokumentno strukturo.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Vzdržujte sintakso organizirano.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Uporabljajte praktična imena razredov in identifikatorjev.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Uporabljajte alternativni tekst pri slikah.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Ločujte stil od vsebine.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Izogibajte se oblikovanja z div-i, če je možno, in uporabite HTML5 elemente.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Nenehno izboljšujte kodo in jo preverjajte. Povezava do enega izmed spletnih validatorjev: https://validator.w3.org/.

Ker pa ni dovolj, da je samo HTML urejen, bomo opisali še nekaj dobrih praks razvoja CSS.

Organizirajte kodo s komentarji.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Pri pisanju CSS-a uporabljajte večvrstičnost in presledke.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Pravilno uporabljajte imena razredov.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Gradite kratke obvladljive CSS-selektorje (Proficient Selectors).

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Uporabite posebne razrede, kadar je to potrebno.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Uporabljajte okrajšave lastnosti in vrednosti.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Uporabljajte okrajšave pri šestnajstiških vrednostih barv.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Izogibajte se uporabi enot pri ničtih vrednostih (nič je zmeraj nič, ne glede na enoto).

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Združujte in poravnajte lastnosti po predponah brskalnikov (Vendor Prefixes).

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Modularizirajte sloge za ponovno uporabo.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

Vse zgoraj naštete dobre prakse so le osnova za to, da bo vaša izdelana koda čitljiva. Da bo koda res takšna, ste odgovorni le vi in vaši soustvarjalci spletnega portala, zato si vzemite čas, preden začnete programirati, in se dogovorite, kako striktno se je treba držati določenih pravil, ter si tako olajšajte razvoj in kasnejše vzdrževanje spletnega portala.

Vir: http://learn.shayhowe.com/html-css/writing-your-best-code/

2 misel na “Kako napisati čitljivo HTML in CSS kodo?

  1. @Branko res je, priporočaš našim bralcem katerega? Predvsem bi bili veseli kakšnega dobrega brezplačnega…

    Sam pri ustavarjanju spletnih aplikacij uporabljam NetBeans in Notepad++

Dodaj odgovor

Vaš e-naslov ne bo objavljen. * označuje zahtevana polja

Lahko uporabite te oznake HTML in atribute: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>