CSS prijedlog organizirane metode kodiranja

Kako svatko od nas ima svoj način, odnosno pristup u pisanju CSS koda, u ovom postu podijelit ću s vama jedan uz pomoć kojeg svoj CSS kod možete organizirati u smislene cjeline.

Uzmite si primjer da ste kupili neki komercijalni predložak koji naravno želite malo dotjerati kako ne bi izgledao kao izvorni. Prvo i najbrže što možete napraviti u samom mijenjanju vizualnog identiteta predloška je izmjena CSS koda. Ako je autor od kojega ste predložak kupili dobro organizirao CSS kod to neće biti problem. Isto tako radi kasnijeg redizajna vaših Internet stranica poželjno je imati smisleno uređen CSS kod.

1. CSS reset

Prvo što trebate napraviti je u CSS datoteku kopirati CSS reset kod koji će određene stvari koje različiti Internet preglednici tumače drugačije postaviti na nulu. Odnosno natjerati ih da svi prikazuju (donekle) jednako.

Niže možete vidjeti CSS reset korišten u “960 gird system” koji je zapravo predložak za izradu predloška s predefiniranim CSS stilovima.

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

CSS HTML standardni elementi

Slijedeći korak je organizacija standardnih HTML elemenata na jednom mjestu. Kao što možete vidjeti ispred naziva nemaju nikakav znak, već isti naziv kao i sam HTML element, na koji se onda primjenjuje CSS.

h1{...}
h2{...}
h3{...}
h4{...}

p{...}

a:link{...}
a:visited{...}
a:hover{...}
a:active{...}

input, textarea{...}
table{…}
ul{…}
…

CSS Kostur stranice

Ispod dijela gdje ste definirali standardne HTML elemente, započnite s definicijom CSS koda za glavne dijelove stranice, tj. njen kostur. Za takve stvari možete koristiti ID-jeve, no nije nužno. ID prepoznajete po prefiksu #, a CSS kod se sa svojim parametrima i njihovim vrijednostima primjenjuje uz pomoć id=”naziv_id-a”.

css-metoda-kodiranja

#okvir{...}
#zag{...}
#navigacija{...}
#sadrzaj{...}
#margina{...}
#podnozje{...}

Svaki od tih dijelova CSS koda ćete naravno proširiti, recimo za navigaciju biste nastavili pisati:

#navigacija ul{...}
#navigacija ul li{...}
#navigacija ul li a:link{...}
#navigacija ul li a:visited{...}
#navigacija ul li a:hover{...}
#navigacija ul li a:active{...}

CSS Klase

Četvrti i posljednji dio su CSS klase koje karakterizira točka (.) u prefiksu naziva same klase a referencirate ju u HTML-u uz ponoć class=”naziv_klase”.

.fl {…}
.fr{…}
.banner125 {…}
.rss-ikona{…}

Nakon što ste organizirali i pripremili CSS kod još vam preostaje ukoliko to želite optimizacija kako bi smanjili samu veličinu CSS datoteke.

Komentiraj