Jan
Separationsångest
Kategorier: (X)HTML CSS Javascript WebstandarderÖvergången från HTML-attribut som styr utseende till att styra utseende med CSS är något som skett bara de senaste åren. Givetvis är det bra att folk har börjat förstå och använda CSS. Det många däremot inte har riktigt koll på är hur man kan förbättra sin kod ytterligare. Att separera innehåll från presentation och funktion är något som många förespråkar idag. Varför ska man göra det? Och vad innebär det exakt? Dessa frågor ska jag försöka svara på i den här artikeln.
HTML är idag ett språk som är till för att märka upp innehållet med relevanta element som beskriver det. Tidigare versioner tillät att man även styrde utseende och funktion direkt i HTML-koden med hjälp av utseendeattribut, se följande exempel:
<body bgColor="black" border="1">
Om man vill skriva om detta med CSS skriver man lämpligtvis på följande sätt:
<body style="background-color: black; border: 1px solid black;">
Koden ovan kommer att validera och kan även ses som korrekt CSS. Det den däremot inte avhjälper är hur plottrig och nerkladdad HTML-koden blir av all utseendeinformation. Genom att lägga all CSS i en egen fil kan man separera innehållet från utseendeinformationen. Det finns olika sätt att inkludera den externa javascript- eller css-filen, vilket tyvärr inte kommer att tas upp i den här artikeln.
Här är samma exempel med skillnaden att HTML och CSS är separerade:
HTML:<body>CSS:
body {
background-color: black;
border: 1px solid black;
}Med hjälp av olika trick kan man få CSSen att “träffa†olika delar av HTML-koden. Antingen genom id/class-attribut på elementen, eller genom CSS-väljare. Ofta använder man en kombination av dessa.
Fördelen med att skriva på detta sätt, att undvika inline-css, är flera. Bland några kan nämnas; Mer överskådlig HTML-kod, all CSS blir samlad på ett ställe – ändrar du på ett ställe uppdateras det på alla sidor som har filen inkluderad, lättare felsökning, lättare för sökmotorer att tolka innehållet, sidorna blir (oftast) mindre och det är lättare att anpassa sidans utseende för olika sidvisare (webbläsare, mobiltelefoner, utskrifter etc.)
När man pratar om att separera även funktion från innehåll handlar det om att bryta ut all javascript ur HTML-koden och lägga i en egen fil. Genom lite smarta funktioner kan man lika bra knyta scriptet till valfria delar i HTML-koden utan att behöva skriva in händelsekoden i HTML-koden:
<a href="#" onclick="popUp(this);">En popuplänk</a>
På ett bättre sätt skulle man kunna bryta ut javascriptet i en egen fil, och få samma funktion, på detta sätt:
HTML:<a href="#" id="popUp">En popuplänk</a>Javascript:
document.getElementById('popUp').onclick = function() {
popUp(this);
return false;
}
Givetvis finns det mycket annat man skulle kunna göra för att förbättra koden ovan på andra sätt, men detta illustrerar på ett bra sätt vad som menas med att separera innehållet från funktionen. Återigen ger det fördelar så som att man får all Javascript på ett ställe, HTML-koden blir mer lättläst och överskådlig och det blir lättare med felsökning.
TYCKTE DU OM ARTIKELN?
