Sådan arbejder du struktureret med CSS og HTML – del 2

Dato: 26/01-2010 13:45

Kategori: Tips og Tricks, Webudvikling

Tags: CSS, CSS Sprites, html, Webudvikling

For omkring 3 uger siden publicerede jeg første del omhandlende en struktureret tilgang til CSS og HTML. Nu skal vi derimod kigge på opfølgerende til dette indlæg.

Ja, der er skam flere kort gemt oppe i ærmet på mig – for ikke at nævne nogle gode pointer nævnt af de kommenterende i første indlæg. De skjulte kort og de fremhævede pointer tåler uden tvivl en fremhævelse.

• Struktureret CSS og HTML – del 1
• Struktureret CSS og HTML – del 2 (du læser)

Lad os hoppe i med begge ben og kigge nærmere på disse “uundværlige” tips og tricks.

Navngivning

Et gentagende punkt der poppede op i kommentarerne var navngivning. Et punkt der absolut fortjener stor fremhævelse, da det faktisk er blandt et af de vigtigste i dit arbejde med CSS eller HTML for den sags skyld. Der er mange måder at gribe navngivning an på, men vigtigst af alt handler det sådan set om at være konsekvent og omhyggelig.

Følgende metoder er ofte brugt, og hvilken du end vælger er ikke så vigtig. Det er langt vigtigere at være konsekvent med valgte metode.

• #outer_container (ses bl.a. brugt i Wordpress til diverse tags)
• #outerContainer

Ligeledes er det selvfølgelig vigtigt, at du tænker dig om ved navngivningen af dine elementer. Det nytter ikke noget at kalde et element for elefant, hvis elementet i virkeligheden er en indkøbskurv på en webshop. Generelt handler det om at overveje navnene til alle elementerne. Og skulle det være ekstra svært at komme på et ordentlig navn for et givent element, så kan du med fordel efterlade en kommentar, der kort beskriver formålet med elementet. Prøv at holde din navngivning så logisk som overhovedet muligt – ellers benyt dig af kommentarer, som nævnt

Desmere kan du med fordel benytte dig af nogle faste navne til faste elementer, der ofte går igen og igen for hver hjemmeside. Selv benytter jeg mig faktisk altid af følgende:

• mainnav
• subnav
• container
• content
• footer

Igen, det handler om at være konsekvent. Specielt, når du er på din arbejdsplads, hvor det ikke kun vil være dig selv, der kommer til at kigge i kildekoden. Desmere bør du absolut overveje, om du vil benytte dig af engelsk, dansk eller et tredje sprog, når du navngiver dine elementer. Mit forslag vil faktisk være at benytte Engelsk, da du slipper for problemer med æøå – igen – husk at være konsekvent, hvilket jeg desværre ikke har været god nok til her på hjemmesiden (pinligt)

Navngivning af grafikfiler

Selvom du kan arbejde ganske målrettet og struktureret med navngivning af dine elementer, så vil prikken over i’et være, hvis du lader dine grafikfiler følge samme navngivning, som dine elementer. Det nytter ikke noget, hvis du kalder et baggrundsbillede for elefant, hvis billedet er baggrunden på en indkøbskurv i en webshop. Nej lad baggrunden følge navngivning af din indkøbskurv.

Lad mig komme med et par eksempler:

• bg_body
• bg_container
• bg_mainnav
• btn_afsendKommentar eller btn_afsend_kommentar
• btn_afsendBesked eller btn_afsend_besked

Og for et gøre det hele endnu bedre, så tilføjer du “bg_” eller “btn_” foran alle dine grafikfiler. Derved har du et nemt og hurtigt overblik over både baggrundsbilleder og knapper, der er brugt til pågældende hjemmeside. Benytter du dig af CSS Sprites (hvilket vi også kigger på i denne artikkel), så vil fløjten selvfølgelig spille lidt anderledes. Tilføjelsen af “bg_” og “btn_” er langt fra de eneste muligheder du har, men såmænd nævnt for at illustrere vigtigheden af navngivning – også på grafikfiler.

Gør brug af “shorthand”

Ved brugen af “shorthand” mister du lidt af overskueligheden, fordi anførte styles på et givent element skrives på 1 linie i stedet for måske 4 linier. Alligevel har det sine fordele, fordi du optimerer din kode og derved sparer unødige tegn.

Benytter du dig af en komprimering på dine stylesheet, kan du alligevel godt vælge ikke at benytte dig af “shorthand”. Egentlig vil jeg mene, at det er lidt af en smagssag, om man vælge at benytte “shorthand” eller ej. Selv er jeg først begyndt på at benytte metoden for ganske nyligt, og synes selv det fungerer ganske glimrende, fordi jeg sparer nogle linier i min CSS – ergo bedre overskuelig for mit vedkommende, men måske ikke for dit – derfor lidt af en smagssag.

Uden brug af “shorthand”

#container {
   background-image: url(/web/grafik/bg_container.jpg);
   background-position: top center;
}

Med brug af “shorthand”

#container {
   background: url(/web/.../bg_container.jpg) top center;
}

Som du kan se er noget af overskueligheden væk, men kodemæssigt har man opnået en betydelig besparelse i tegn. Men bedøm selv, om du vil benytte metoden eller ej. Når du først har et godt og fast greb i CSS og forståelse heraf, så er det absolut intet problem – ej heller for din overskuelighed. Desmere kan du jo være konsekvent i rækkefølgen af de forskellige egenskaber, du tilfører et element.

Bruger du “shorthand” ved skrifttyper og tekster, så skal du være klar over, at her skal visse elementer altid indgå, og samtidig skal have en bestemt rækkefølge for at virke. Alt sammen noget du hurtigt opdager, når du sidder med fingrene i sovsen. Et et par umulige og mulige eksempler heruder:

Ikke muligt:

font: 10px;
font: 10px bold;

Muligt:

Font: 10px/16px verdana;
Font: bold 10px/16px verdana;

Dette betyder bl.a., at ønsker du at ændre skriftstørrelsen, er du stadigvæk nødt til at benytte dig af font-size.

Iøvrigt er det også værd at bemærke, at “Shorthand” også kan bruges på både margin og padding – 2 af de måske nok meste brugte styles, når vi arbejder med CSS.

Eksempler:

padding: 10px 15px 10px 15px;
margin: 10px 15px 10px 15px;

Og hvis du eventuelt døjer lidt med at huske, hvad der er hvad, så stødte jeg faktisk netop på et blogindlæg, CSS shorthand clockwise rule, der illustrerer sammenhængen.

Rækkefølge af styles

Jeg har allerede i første blogindlæg været inde på, at du bør holde en bestemt rækkefølge i dine enkelte styles på et element. Herudover kan du også sørge for, at rækkefølgen på stylingen af de enkelte elementer følger rækkefølgen i dit HTML. Lad mig komme med et simpelt eksempel:

HTML

<div id="container">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
</div>

CSS

#container {}

   #header {}
   #content {}
   #footer {}

Der er selvfølgelig nogle tilfælde, hvor det ikke helt kan lade sig gøre, men du forstår nu nok det store billede af eksemplet ovenfor

Gør brug af sektionsoverskrifter

Nogle af os husker stadigvæk dengang, hvor man afleverede den ene rapport eller stil efter den anden, mens andre måske stadigvæk jævnligt skriver den ene opgave efter den anden i forbindelse med skolen eller arbejdet. Her er vi vant til at inddele med overskrifter, underoverskrifter og andet for at skabe et godt hieraki og struktur.

Når vi arbejder med CSS, så kan vi faktisk også benytte de samme muligheder. Du kan ganske enkelte tildele dit CSS nogle overskrifter eller sektionsoverskrifter, som jeg har valgt at kalde dem. Jeg har i lang tid benyttet mig af denne mulighed – husker ærligtalt ikke, hvornår jeg begyndte. Lad mig give et par eksempler på sektionsoverskrifter:

• Main Navigation Level 1
• Main Navigation Level 2
• Formular News Letter
• HTML / Body
• Reset

Der er absolut ingen grund til at have lange filer uden sektionsoverskrifter- vel?

Påfør typen af element

Ja, hvad tænker jeg egentlig på, når jeg skriver sådan? Ikke alle vores elementer på en hjemmeside består af <div> – nej slet ikke. En hjemmeside består af en lang række elementer lige fra lister til links til noget helt tredje.

I stedet for at forklare, så lad mig vise et par eksempler:

• input.txtfield
• a.previous
• span.headline
• fieldset#newsletter

Jeg prøver så vidt muligt altid at få påført typen af element på mine forskellige styles i mit stylesheet, dog med undtagelsen af div-elementet. Hvis ikke jeg har påført nogen elementtype, så vil elmentet ganske enkelt være et div-element. Man kan diskutere om det er den rette fremgangsmåde eller ej – vigtigst er det såmænd bare at være konsekvent.

Fordelen ved ovenfor nævnte metode vil være, at man ikke behøver at skulle kigge i kildekoden for at finde ud af, hvilket element pågældende styles er tilegnet. Det kan ærligtalt være lidt af en jungle, hvis du arbejder med store hjemmesider, så min opfordring er absolut at påfører elementtyperne.

CSS Sprites

Tidligere i dette blogindlæg lovede jeg at fortælle nærmere om fænomenet CSS Sprites. Sprites har egentlig ikke så meget med en struktureret tilgang til CSS eller HTML at gøre – alligevel er Sprites med til at optimere på en pågældende hjemmeside – ligesom alle de andre tips og tricks er. Derfor synes jeg også godt, at vi kan kigge lidt nærmere på fænomenet.

Med sprites er målet at opnå færre kald og derved bedre loadtider på en given hjemmeside. Idag bliver hjemmesider mere og mere grafiktunge samtidig med større og stigende udbreddelse af Java Script. Selvom du optimerer alle dine grafikfiler til at fylde mindst muligt og stadig ikke tabe for meget i kvalitet, så hjælper det ikke på loadtiden, at serveren skal finde 100 små grafikfiler frem – tværtimod.

Derfor, hvis du i forvejen har sat standarden på et højt niveau, så bør du også kigge nærmere på netop CSS Sprites, hvor du kombinerer forskellige grafikfiler til 1 stor fil. Jeg har prøvet at benytte mig af metoden her på min egen hjemmeside – så vidt det nu har været muligt.

Har følgende kombinerede filer:

• bg_gif.gif
• bg_gif_repeat-x.gif
• bg_png.png
• bg_png_repeat-x.png
• bg_png_repeat-y.png

Som i kan se, har jeg ikke kunne kombinere mine grafikfiler meget mere end gjort – Men sig endelig til, hvis det kan gøres endnu bedre? Bemærk iøvrigt venligst, hvordan jeg har valgt at navngive mine Sprites. Arbejder du med Sprites er det stadigvæk vigtigt at være god i din navngivelse – ingen grund til at lægge de gode rutiner på hylden af den grund.

Sidst men ikke mindst, så er det en tidskrævende opgave at benytte sig af Sprites, og det er ikke sikkert en opgave på din arbejdsplads tillader, at du bruger den ekstra tid. Men måske du burde kræve den ekstra tid – specielt nu hvor Google er begyndt at lægge vægt på loadtider. Noget jeg iøvrigt klapper voldsomt i min hænder over.

Læs iøvrigt denne artikel fra Smashing Magazin omkring CSS Sprites

Læs iøvrigt også blogindlægget – To sprite or not to sprite – af Vladimir Vukićević. Han bringer mange gode pointer på banen, som jeg absolut synes er værd at bemærke, når vi snakker CSS Sprites.

Desmere stødte jeg forleden på en webservice, der skulle kunne generere CSS Sprites for dig – helt automatisk. Jeg har dog ikke afprøvet denne service endnu, så skal ikke kunne sige, hvor godt et stykke arbejde, den udfører. Ellers har jeg også fundet en anden webservice – CSS Sprite Generator – der måske klarer jobbet til UG. Igen ikke en webservice, som jeg har afprøvet. Lavede mine egne CSS Sprites – the hard way. Fordelene ved en webservice kan dog være, at du får de mest optimale filer ud af processen.

Øvrige værktøjer, links og andet relevant

• Dust-Me Selectors – Tjek for ubenyttet CSS
• Minifyme – Minimér CSS og Java Script. Kan være nyttig, hvis du ikke bruger Wordpress, og har diverse plugins lige ved hånden.
• CSS Type Set – Afprøv forskelligt udseende på tekst og få CSS’en direkte til afbenyttelse. Nifty hvis du er ny i faget.
• Typetester – Sammenlign tekster. Specielt handy, fordi den giver et overblik over websikre fonte.
• HTML Entity Character Lookup – Find HTML-koderne for specialtegn – fåes sågar som en widget til dit Dashbord på Mac’en – Gotta love it
• Test everything – 100+ værktøjer i 1 til at teste din hjemmeside – faktisk lidt vildt.
• Smush.it – Pres de sidste bytes ud af dine billeder og grafikfiler.
• Load Impact – Test din hjemmesides loadtider.

Internettet er et stort og uoverskueligt sted, men det byder på et nærmest uendeligt antal af små og smarte værktøjer, der kan afhjælpe os i hverdagen. Ovenfor har jeg opremset nogle stykker, men det kunne være ekstra fedt, hvis læserne gad dele endnu flere – jeg ved i gemmer på dem Del også gerne værktøjer, der ikke nødvendigvis har noget med en struktureret tilgang til CSS og HTML. Flere af de nævnte værktøjer overfor falder også udenfor kategori.

Mine 10 bud

Ja, nu undrer du dig måske over, hvorfor jeg siger 9 bud fremfor 6, som jeg havde nævnte i første del. Sagen er sådan set ganske enkel, jeg har udvidet mine bud med 3 ekstra siden sidst. De forrige 6 bud er derfor også blevet opdateret med de 3 ekstra bud. Men for god ordens skyld skal du få alle bud nedenfor:

• Hold orden og struktur
• Undgå divitis (overforbrug af div-elementer)
• Undgå Classitis (overforbrug af class)
• Husk titler på links (øger brugervenligheden)
• Husk Alt på billeder (Kan hjælpe på SEO)
• Gør brug af Defintion Lists fremfor tabeller, hvis muligt. Tag eksempelvis et kig på mit CV
• Afslut dine HTML-tags (specielt Meta og Img)
• Hold dig til et sprog (eksempelvis Engelsk)
• Vær konsekvent i din navngivning
• Clear dine floats (tro mig, ellers kan det give grå hår)

Bud nummer 9 har måske ikke så meget med struktur at gøre, men utallige gang har det vist sig at være roden til alt ondt, hvis man har glemt at nulstille sine floats.

Jeg håber selvfølgelig i kan bruge alle mine tips og tricks nævnt i dette blogindlæg. Det kan også være, at i har endnu flere tips og tricks end dem, som jeg har nævnt i både første og anden del omkring en struktureret tilgang til CSS og HTML. Når alt det er sagt, så lad mig endelig høre jeres meninger – positive som negative