Strukturera dina CSS-filer i tre steg

När ens sida växer och byggs ut eller förändras så växer också kaoset i CSS-filerna. Det finns flera olika lösningar hur man kan organisera upp sina filer och CSS-kod men det finns ett sätt jag riktigt har fastnat för.

1. Dela upp dina filer

Dela upp filerna i flera mindre delar. Importera en main.css fil och därifrån använd @import url(annanfil.css); för att öka översikten. Personligen väljer jag att dela upp min CSS i tre olika delar: layout, basic och typo. Layout.css lägger jag allt som påverkar eller är involverad i kontruktionen av sidan. basic.css är främst omdefinerade HTML-taggars utseende och placering (till exempel a, body, div, p etc) och typo.css hanterar all typografi och text.

Fördel
+ Bra översikt
+ Mindre antal rader
+ Perfekt för större sajter

Nackdel
- Ökar antalet HTTP-requests från ett till fyra.

2. Använd shorthands

Att använda förkortningar i sina CSS-filer är ett mycket bra sätt att öka läsbarheten när man väl lärt sig. De vanligaste är margin/padding som kan förkorta fyra rader till en rad genom att skriva margin: top right bottom left. Men det många glömmer bort är font och background:

font-size: 0.5em;
font-family: arial, sans-serif;
font-weight: thick;
line-height: 0.7em;

Kan förkortas till font: thick 0.5em/0.7em arial, sans-serif.

Fördel
+ Mindre rader
+ Högre läsbarhet
+ Mindre risk för dubletter

Nackdel
- Kan ta lite tid innan man fullt ut greppat

3. CSS möjligheter till kommentarer kan utnyttjas

När filen börjar uppgå till 200 rader så kan det kännas lönlöst att hitta dit man ska. För att lösa problemet skapar jag ett slags index i början av varje fil samt ett övergripande index i main.css.

*
*    MAP:
*    _____LAYOUT
*    _____NAV
*    _____GENERIC
*/

Sen ovanför varje sektion sättes en kommentar med:

/*
*     ______LAYOUT
*/

Använder man systemet blir det enklare att ögna igenom och snabbt hitta det man söker.

Fördel
+ Hittar dit man ska
+ Känns mer strukturerad

Nackdel
- Tar utrymme
- Tar tid

Finns det andra tips hur man ökar hanteringen av CSS-filerna?