God programmeringskik til CSS Skrevet den december 7th, 2007 af Ulrich Gerting Bojko

Som Michael tidligere har nævnt så er der “do’s n’ don’ts” når man laver design via CSS. Blandt andet er en af de vigtigste punkter, at man navngiver sine styles inden for elementet. Det gør det meget nemmere for en efterfølgende revision af designet eller brug af CSS’et til andre designs senere hen.

Da jeg først læste Michaels artikel tænkte jeg ikke videre over det men sidenhen har jeg erfaret at det er hamrende god programmeringsskik. Mest af alt fordi jeg ofte sidder og skal rode i et CSS og opdager at jeg ville ønske at udvikleren fra start, havde gjort sig den umage at putte alle styles ind i hvert enkelt element.

Et eksempel:

I stedet for at have noget kode der ligner:

  1. h2 {
  2. color:#BFD72F;
  3. text-transform:uppercase;
  4. font-size:18px;
  5. letter-spacing:5px;
  6. font-weight:bold;
  7. }
  9. p {
  10. color:#EEE;
  11. font-size:12px;
  12. line-height:20px;
  13. }
  15. em {
  16. color:#EEE;
  17. font-size:12px;
  18. line-height:20px;
  19. }

Så er det væsentligt nemmere at have koder hvor hver enkelt style inden for elementet kodes således:

  1. #maincontainer .post h2 {
  2. color:#BFD72F;
  3. text-transform:uppercase;
  4. font-size:18px;
  5. letter-spacing:5px;
  6. font-weight:bold;
  7. }
  9. #maincontainer .post p {
  10. color:#EEE;
  11. font-size:12px;
  12. line-height:20px;
  13. }
  15. #maincontainer .post em {
  16. color:#EEE;
  17. font-size:12px;
  18. line-height:20px;
  19. }

Det er mere arbejde i programmeringsfasen men det er meget mindre arbejde bagefter ved en designændring. Muligheden for detaildesign er væsentlig større. F.eks. vil det ikke tage mange sekunder at ændre størrelsen på <p> i en “post” uden at det påvirker tekststørrelsen alle andre steder.

Tegn før du taster

Mange gange…. Alt for mange gange er jeg selv faldet i den fælde, at jeg ikke har forberedt mig godt nok. “Vi skal have lavet det her design”, har ordren bare lydt. Og jeg er fluks gået i gang uden nogen konkret plan for hvordan mine elementer skal organiseres. Efter talløse timer brugt på at omprogrammere ting jeg allerede havde lavet, har jeg endelig lært lektien.

Print designet ud i så stort format som din printer tillader. Tag en lineal og begynd at tegne dine elementer. Brug al den tid det tager at få struktureret alle dele af designet således at der er en klar plan for hvad der skal laves inden du går i gang. Typisk opstår der meget færre problemer undervejs. Dog betyder det langt fra at du ikke bliver klogere undervejs. Nogle gange skal der lige et lille element mere på og nogle gange driller et element så man bliver nød til at lave sin plan lidt om. Men selvom planen skal laves lidt om undervejs er det store overblik guld værd.

Kommenter dit CSS

Selvom det virker som trist arbejde og ofte er noget man glemmer når det hele skal gå lidt hurtigt, så er et kommenteret CSS afsindigt lækkert når man 6 måneder senere skal kigge sit CSS igennem og har glemt alt om hvad det nu lige var man tænkte på da det blev bygget i sin tid. Et struktureret CSS med kommentarer sparer mange timers detektivarbejde senere. Så koden ovenfor vil i sidste ende komme til at se således ud:

  1. /* Styles til posts i maincontainer start */
  2. #maincontainer .post h2 {
  3. color:#BFD72F; /* Ændret den 4. juli pga. den amerikanske uafhængighedsdag - UBO */
  4. text-transform:uppercase;
  5. font-size:18px;
  6. letter-spacing:5px;
  7. font-weight:bold;
  8. }
  10. #maincontainer .post p {
  11. color:#EEE;
  12. font-size:12px;
  13. line-height:20px;
  14. }
  16. #maincontainer .post em {
  17. color:#EEE;
  18. font-size:12px;
  19. line-height:20px;
  20. }
  21. /* Styles til posts i maincontainer slut */

Lagt i: Informations Teknologi

Leave a Reply