Pređi na sadržaj

Jedan suvi poljubac za CSS… ili, kako organizovati stilove

Bilo da radite na velikom projektu gde su uključeni mnogobrojni članovi razvojnog tima, ili ste volonterski prihvatili da napravite web sajt od par stranica vašem rođaku, bitno je da poslu pristupite organizovano i što je najvažnije držite se dva osnovna principa KISS (eng. Keep it Simple, Stupid) i DRY (eng. Don’t Repeat Yourself).

Često najjednostavnija rešenja su odgovori na veoma kompleksne probleme. Oba navedena principa se primenjuju u razvoju softvera, pa isto tako se mogu primeniti i na vaš CSS kod, koji na prvi pogled i nije neki programerski zadatak, ali zahteva organizovanost i poznavanje osnovnih principa CSS: kaskade, nasleđivanje i specificitet.

Neorganizovani tzv. špageti kod će veoma brzo dovesti do toga da gubite svoje dragoceno vreme, pokušavajući shvatiti zašto dugme neće da se oboji u crveno, nego je još uvek zeleno kao i prethodno, ili zašto slika nema okvir, iako ste jasno stavili do znanja vašem CSS kodu šta želite da vidite.

U čemu je tajna? Ja bih rekla u jednostavnosti. Pokušajte rasčlaniti, prilagoditi i modulizirati vaš CSS. Ovakvu strukturu je odlično opisao Jonathan Snook, i kreirao CSS okvir nazvan SMACSS (eng. Scalable and Modular Architecture for CSS).

Ideja je da se CSS kod rasčlani na sledećih 5 kategorija:

  1. Baza
  2. Layout
  3. Moduli
  4. Stanje (eng. State)
  5. Tema

Baza će da sadrži definicije osnovnih elemenata, i njihovih opcionalnih pseudo klasa. Baza neće sadržavati nijednu definiciju klase ili ID selektora.

html {
    color: #000;
    font-size: 1em;
    line-height: 1.4;
}

a {
    color: #039;
}

a:hover {
    color: #03F;    
}

Layout definiše sam izgled stranice izuzev komponenti i sadržaja, tj. opisuje layout grid, header, footer i ostale celine stranice.

#header, #main, #footer {
    width: 960px;
    margin: auto;
}

#article {
    border: solid #CCC;
    border-width: 1px 0 0;
}

U kategoriju modula spadaju zapravo komponente koje ćete želeti ponovo upotrebiti na primer: navigacija, formular, tab panel itd. Moduli se po pravilu nikada ne bi trebalo da definišu preko ID selektora već preko class selektora iz razloga ponovne upotrebljivosti.

.tab-panel > h2 {
    padding: 7px;
}

.tab-panel span {
    padding: 5px;
}

Stanje (eng. State) kategorija sadrži CSS pravila kojima želite da prepišete određene module ili layout stilove. Tako na primer identična stanja možete primeiti na razne module. Na primer: modul koji ispisuje poruke je definisana u kategoriji modula sa klasom .poruka,  ali u slučaju da poruka javlja grešku, dodatno CSS pravilo .greska {color: red;} u State kategoriji će prepisati osnovno pravilo. Istu klasu .greska možete primeniti i na <label> tagu kod validacije formulara.

<div class="poruka greska">
<span>Ovo je greška</span>
</div>
<label class="greska">Prezime</label>
<input type="text" value="" prompt="Prezime" />

 

Kategorija Tema je opcionalna, i omogućava prilagođavanje modula i komponenti datom dizajnu.

 

 

Postavi svoj prvi komentar

Ostavite odgovor

Vaša adresa e-pošte neće biti objavljena. Neophodna polja su označena *