God skik ved udarbejdelse af CSS (Cascade Style Sheet)

Dato: 05/07-2008 12:25

Kategori: Tips og Tricks, Webudvikling

Tags: Cascade Style Sheet, CSS, Webudvikling

Når man arbejder med CSS, så er der en række uskrevne regler, man med fordel kan følge, og derved arbejde mere struktureret. I mit forrige indlæg skrev jeg omkring god skik i Adobe Photoshop ved udarbejdelse af webdesigns. Ligeledes mener jeg personligt, at der er en række uskreve regler omkring CSS.

Jeg arbejder næsten dagligt med CSS eller i hvertfald webudvikling – til tider afløst af designarbejde. Herved har jeg draget mig mange gode erfarringer omkring, hvordan man kan optimerer sit arbejde med CSS. Det er min erfarring, at de fleste folk bare fylde sit CSS i en fil uden at have megen struktur, hverken på filen i sig selv eller de enkelte klasser.

På min arbejdsplads har jeg udarbejdet et såkaldt framework, der med fordel kan forbedre det fælles arbejde vi har med bl.a. CSS. Jeg kan af logiske grunde selvfølgelig ikke bare dele dette framework med mine læsere, men jeg kan dog godt komme med en række gode fif

Lad os i første omgang tage et kik på, hvordan en forholdsvis ustruktureret css-fil ser ud kontra en mere struktureret css-fil. Nedenfor er der 2 forskellige links, hvor du forholdsvis let skulle kunne se forskellen

En ustruktureret css-fil

En struktureret css-fil

Sidste nævnte, som er fra mit eget website, kan sagtens blive endnu mere struktureret. Ideen med disse 2 forskellige filer er dog at vise, hvor smart det kan være at inddele sit stylesheet i afsnit med forskellige gode og forklarende overskrifter. Det skal dog siges, at mit stylesheet kan blive endnu mere struktureret

Arbejder man med en stor hjemmeside kan man med fordel vælge at dele sit stylesheet op i en række filer, hvor noget som hovednavigationen og en eventuel undernavigation kan smides i hver sin fil. Ser man på mit stylesheet, så har jeg valgt at importerer lightbox.

Ene og alene det, at man får struktureret sit stylesheet kan effektiviserer ens arbejde væsentlig, specielt i en virksomhed, hvor alle herved kan forvente en mere ens struktur. Samtidig er det hurtigere for andre personer end en selv at danne sig et overblik over filen.

Man kan faktisk vælge at tage det hele et skridt længere end bare at inddele sit stylesheet i sektioner og flere filer. Efter min mening kan man ligeså godt vælge at tildele sine klasse med en bestemt struktur. Nedenfor kan du nemmere se, hvad jeg egentlig mener

#container {
     width: 900px;
     height: 300px;
     padding: 0;
     margin: 0;
     background-image: url(/web/grafik/background.jpg);
     background-repeat: repeat-x;
}

h1 {
     font-size: 30px;
     font-weight: normal;
     font-style: italic;
     color: #000000;
}

Visse styles går næsten igen på de forskellige klasser man arbejder med, og derfor kan man ligeså godt vælge en ens struktur. Herved kan andre end en selv atter forvente en vis struktur, og derfor endnu hurtigere redigerer i det pågældende stylesheet.

Ydermere, så kræver det ærligtalt ikke meget af en person at arbejde struktureret med CSS, men det er mit indtryk at mange ikke rigtigt ynder at yde denne lille ekstra indsats. Det er ærgeligt efter min mening, da arbejdet ellers i højere grad vil bære præg af professionalisme. Om end, så er jeg meget pernitten med netop dette på min arbejdsplads – nogle gange til stor irritation blandt mine kollegaer. Men som jeg ser det, så er det kun til gavn for os selv. Det bliver bare mere behageligt og sjovere at arbejde med de forskellige løsninger, når man kan forvente en vis struktur, og ikke mindst professionalisme.

Det er iøvrigt også min erfarring, at mange bare tænker: “Bare skidtet virker”. Jo jo, det er ganske vidst også vigtigt, men næste gang man skal ind og udvikle eller ændre på løsningen, så er det alligevel rart at vide, at man ikke skal besøge en slagmark af elendig opstilligt kode. Det gælder jo rent faktisk ikke kun CSS, men også HTML, Php, Asp, og hvad der nu ellers findes af sprog derude.

Mit råd kan derfor kun være, at man som person skylder sine kollegaer at yde denne lille indsats. Det kræver jo ikke noget vitterligt af en som person, da de fleste ting hurtigt sidder på rygraden. Samtidig gør du det også nemmere for eventuelle nye kollegaer i firmaet, eller en eventuel 3 part, der skal ind og afhjælpe i fornødne situationer

DO IT!