Sådan arbejder du struktureret med CSS og HTML – Del 1

Tilbage i tidernes morgen skrev jeg et indlæg omkring god skik i udarbejdelsen af CSS. Meget er sket siden da -  Jeg har tilegnet mig meget erfaring på ca. 1½ år – både omkring CSS og HTML, men her vil hovedsageligt være fokus på CSS.

På min arbejdsplads, Vestjysk Marketing, svinger jeg ofte pisken – måske ofte nok i følge nogle – i håb om bedre struktur og håndtering af både HTML og CSS. Det er ikke nogen relativ nem opgave, da vi som individer sjældent tænker 100% ens. Alligevel er der muligheder for at håndholde en vis ensformighed – dog ingen nem opgave – tvært imod.

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

Mange af de punkter, som jeg bragte op i mit førnævnte indlæg gælder stadigvæk. Men hvad er så kommet til siden da?

Opsæt de inviduelle styles alfabetisk

Førhen fulgte jeg en bestemt opsætning pr. element, hvor en række meget ofte brugte styles altid blev opsat i en bestemt rækkefølge. Metoden er ikke dårlig i den forstand, men ved at benytte dig af en alfabetisk opsætning skal du ikke huske nogen bestemt rækkefølge, men i stedet for benytte dig af viden, tilegnet tilbage i folkeskolen.

Eksempel:

#container {
  background: #fff;
  border: 1px #eeeeee solid;
  height: 500px;
  margin: 0 auto;
  padding: 10px;
  width: 500px;
}

Skab et synligt hieraki

Hvis du er god til at holde orden i dit stylesheet, så er et hieraki måske ikke nødvendigt. Alligevel kan et hieraki hurtigt hjælpe dig med at overskue, hvor tingene er placeret i forhold til hinanden. Vi er allerede bekendt med et hieraki, når vi arbejder med HTML eller programmering, hvor tingene rykkes ind så snart, de hører under elementet overfor – også kendt som parent i fagsprog. Derfor burde det være en rimelig smal sag at tilføre et hieraki til dit stylesheet.

Lad mig komme med en demonstration:

#container {
  background: #fff;
  border: 1px #eeeeee solid;
  height: 500px;
  margin: 0 auto;
  padding: 10px;
  width: 500px;
}

   #header {
     height: 100px;
     padding: 10px;
     width: 480px;
   }

   #mainnav {
     border-bottom: 1px #eeeeee solid;
     padding: 10px;
     width: 460px;
   }

Som det ses i eksemplet ovenfor, bliver henholdsvis #header og #mainnav rykket ind for at skabe en “illusion” af, at det er underliggende elementer. I dit hoved er det måske klart nok, at de 2 elementer har #container som parent, men det er måske ikke tilfældet for en kollega. Nu skal det siges, at dette eksempel er yderst simpelt, men det hjælper på at illustrere vigtigheden af et hieraki.

Kig derimod i mit stylesheet, og se et hieraki i stor format.

Med et hieraki hjælper du også andre til at se, hvordan strukturen er i HMTL’en uden at skulle til at kigge i andre filer. Herved gør du arbejdsprocessen væsentlig nemmere for alle, og samtidig dig selv i det lange løb. Med tiden arbejder man på en lang række webløsninger, og logisk nok er det svært at huske dem alle. Samtidig tager det ikke nogen betydelig ekstra tid at skabe et hieraki – specielt ikke – hvis du gør det fra starten af, så tid er ingen undskyldning, tvært imod.

Spar på benævnelserne

Når du refererer til underliggende elementer – children i fagsprog – er det ikke nødvendigt at nævne samtlige tags. Ganske vidst kan det hjælpe en smule på overskueligheden, hvis du tager aller tags med, men i det lange løb giver det bare en lang række unødige tegn, der fylder ekstra plads. Ja ja, nu tænker du sikkert noget i retningen af – ja, men så meget plads er det heller ikke. Nej, men lidt plads her og der, bliver til meget plads i alt – husk det

Lad mig komme med 2 eksempler – henholdsvis “forkert” og “korrekt”:

Forkert: #mainnav ul li a {}

Korrekt: #mainnav a {}

Ved at benytte ovenstående metode opnår du stadigvæk det samme visuelle resultat, men du sparer en masse “overflødige” tegn. Det er kun nødvendigt at have den fulde sti med, hvis du har andre globale styles, der fungerer som parent.

Hold orden i grupperinger

Nogle gange samler man en række styles i grupperinger for ikke at genskrive de samme styles til en række elementer, der alligevel skal se nogenlunde ens ud. Mange vil måske  bare skrive dem ud på en lang linie adskilt af et komma. En metode jeg egentlig selv altid har brugt, og kun for nyligt har ændret lidt på.

Lad mig komme med 2 eksempler – henholdsvis “forkert” og “korrekt”:

Forkert: #mainnav ul li a, #footernav ul li a, #sectionnav ul li a {}

Korrekt:
#mainnav ul li a,
#footernav ul li a,
#sectionnav ul li a {}

Igen får du skabt en væsentlig større overskuelighed af din gruppering – ingen grund til at gøre det besværligt for andre eller for den sags skyld dig selv

Benyttelse af reset

Der findes en lang række forskellige måde at resette dit stylesheet på, men en af de mest populære kommer fra Eric Meyers. Et reset sparer dig for meget bøvl i dit arbejde med CSS. En række styles skal ofte defineres på mange elementer igen og igen, men vha. et reset, slipper du for at genskrive de samme styles igen og igen.

Personligt, så benytter jeg mig af en begrænset udgave af Eric Meyers reset, da jeg synes den store udgave skaber nye problemer. Jeg har eksempelvis oplevet problemer med tabeller – også selvom tabeller nærmest er tabu i min verden – men tabeller egner sig nu alligevel til deres retmæssige intention – tabulær data. Desmere kan den fulde udgave af Erics reset betyde, at man må definere en række styles på ny – sagt på en anden måde – skabe ekstra arbejde, hvilket ellers er ideen at bespare.

Kig i mit stylesheet og se den begrænsede udgave.

Generel opsætning af CSS til formularer

Hvis et website har en vis størrelse, så er der også en god chance for, at siden har op til flere formularer, og derfor kan det være en rigtig god idé at holde alle de nødvendige styles i en seperat fil (input.css). I filen er det ydermere en stor fordel at definere en række generelle styles til de forskellige formularfelter.

Hvis vi levede i en perfekt verden – dvs. uden Internet Explorer 6 – kunne vi benytte os af selectors, der udvælge specifikke formularfelter. Eksempelvis “Text” eller “Submit”, men uheldigvis understøttes denne mulighed ikke i førnævnte browser. Derfor har jeg i min metode valgt at tilskrive de forskellige felter en række klasser.

Eksempler:

.txtfield – <input type=”text” class=”txtfield”>

.btn – <input type=”submit” class=”btn”>

Med ovenstående mon ikke du forstår det store billede? Man opnår den samme mulighed som med selectors, men med understøttelse i Internet Explorer 6. Desmere er det nemt at tilføje ekstra klasser, hvis man skulle få behov herfor. Samtidig får man også en fil, der er velstruktureret og nem at overskue – hvis altså man forstår at holde orden.

Se et simpelt eksempel på overnævnte fil

Når du benytter dig af fremgangsmåden i eksemplet, så vil du i de gennerelle styles, øverst, definere det som går igen og igen – og efterfølgende kun lave de nødvendige korrektioner i de individuelle formularer rundt på pågældende hjemmeside. Jeg håber du kan se, hvor simpelt og struktureret det faktisk kan gå hen at blive.

Ps: Det skal iøvrigt nævnes, at jeg ikke ret ofte benytter mig af et hieraki i input.css, men det synes jeg med fordel sagtens kan gøres.

Benyt et framework

Ligesom med et reset, så er der mange tilbud ude på internettet. Logisk nok, så kan jeg ikke tillade mig at dele det framework, som vi benytter os af på min arbejdsplads. Alligevel vil du opleve, at min egen hjemmeside følger de samme metoder og principper.

Hvad end der virker bedst for dig, har jeg ikke noget endeligt bud på. En idé kunne dog være at kigge i dybden på de forskellige muligheder, som ligger til fri afbenyttelse på internettet. Som minimum kan du lære et par gode tricks til afbenyttelse i dit arbejde. Nedenfor finder du links til nogle af de mest kendte muligheder:

• Blueprint CSS
• Elements CSS Framework
• YAML CSS Framework
• YUI Grids CSS
• Boilerplate CSS Framework
• CleverCSS
• 960 Grid System

Gode links og vigtige artikler

Jeg har samlet et par gode links og artikler, der er gode at have i baghånden, hvis man skulle rende ind i et par problemer. Nogle giver en god baggrundsviden, mens andre er gode som opslagsværker. Uanset hvor dygtig man end måtte være, så er det svært at huske det hele.

• Opslagsværk til CSS og HTML
• CSS Box Design
• Fra tabeller til Div-elementer
• Webudviklerens store håndbog
• The Mystery of CSS Float Property
• CSS Differences in Internet Explorer 6, 7 and 8
• Mastering CSS Coding: Getting Started
• CSS Wishlist: New Ideas, Debates and Solutions
• Backgrounds In CSS: Everything You Need To Know

Mine 10 bud

Lad os her til slut kigge på mine 9 bud, der i kombination med alt ovenstående skulle hjælpe dig godt på vej – uanset om du er ny eller en garvet rotte i faget.

• 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)

Måske alle, der arbejder med webudvikling, burde følge mine bud? Ej, det er som udgangspunkt op til en selv, men de kan dog helt sikkert hjælpe dig med at arbejde mere målrettet og effektivt med CSS. Det vil også blive nemmere for dig fremadrettet, hvor du kan have behov for at lave tilretninger.

I mange situationer er det nemt at vælge  den nemme vej over hegnet, men i det lange løb vil du nemt snuble nemt i dine egne snørebånd, fordi det pludselig tager væsentlig længere at lave tilretninger. Det bliver endda endnu værre, hvis en kollega skal ind at kigge på rettelser. Det er aldrig nemt at gennemskue, hvordan andre tænker, så hvis man følger en nogenlunde fast fremgangsmåde på arbejdspladsen, bliver det pludseligt langt nemmere. Du bør ikke kun tænke på dig selv, når du udfører dit arbejde.

Det skal lige fortælles, at jeg har udeladt at fortælle om et par enkelte tips, som du måske selv kan finde i mit stylesheet – good hunting

Kom med dine input

Uanset hvor dygtig man end måtte være, så er det altid rart med input fra andre. Måske du har nogle forslag og ideer, der kan være med til at gøre arbejdet endnu mere struktureret. Samtidig vil det også være rart at høre din mening omkring mine metoder Det kunne sagtens tænkes, at de trænger til en afpudsning i kanterne.