Par savjeta kod pisanja CSS koda

Naletio sam na neka pravila pisanja CSS koda, malo sam to usporedio sa svojim iskustvom, pa evo na što biste mogli obratiti pozornost kod pisanja CSS definicija. Isto tako, provjerite zgodne alate za smanjivanje veličine CSS definicija:

http://www.csscompressor.com/

http://www.cssoptimiser.com/

1. Pisanje propertyja po abecedi

#nav{
border: solid 1px #DEDEDE;
color: #000;
padding: 10px;
width: 650px;
}

2. Uvučene definicije child elemenata

#nav{
width:650px;
}
#nav ul li{
float:left;
}
#nav ul li a{
display:block;
}

3. Komentirajte blokove koda, organizirano po dijelovima templatea

/*-------------------
HEADER
------------------- */
#header{width:650px;}
#header a:link,
#header a:visited{
color:#0033CC;
}

/*——————-
NAVIGATION BAR
——————- */
#nav{width:650px;}
#nav ul li{
float:left;
padding:0 10px;
}

4. Razdvojite i poravnajte propertyje i vrijednosti

#main{
width: 650px;
}
#main h1{
color:          #000;
font-size:      22px;
font-weight:    bold;
}
#main p{
color:          #000;
font-size:      12px;
padding:        10px;
}

5. Grupirajte CSS definicije s istim svojstvima

Prije:

.icon-facebook {
background:url(facebook.gif);
padding-left:  26px;
margin-right:  20px;
width:        100px;
}
.icon-twitter {
background:url(twitter.gif);
padding-left:  26px;
margin-right:  20px;
width:        100px;
}
.icon-delicious {
background:url(delicious.gif);
padding-left:  26px;
margin-right:  20px;
width:        100px;
}

Poslije:

.icon-facebook,
.icon-twitter,
.icon-delicious {
padding-left:  26px;
margin-right:  20px;
width:        100px;
}
.icon-facebook{background:url(facebook.gif);}
.icon-twitter{background:url(twitter.gif);}
.icon-delicious{background:url(delicious.gif);}

Ostavite komentar:

Click here to cancel reply.

Ime *

Mail adresa (neće biti javno objavljena) *

Website

CAPTCHA Code