Body en style

De body-heeft-class (of id) trick.

Iedereen weet dat je class en id kunt toevoegen aan alle elementen van je HTML, maar wat weinig gebruikt wordt is.
Je kan deze ook toevoegen aan je body om zo, bijvoorbeeld elke pagina een andere header-afbeelding te geven.

Deze techniek heb ik eens gebruikt voor de website die ik maakte voor mijn huidige werk: Eltec System
Hoe werkt da nu?

Om niet onnodig elke pagina van aparte CSS te voorzien, of elke keer verschillende opmaak te schrijven heb ik de body voorzien van een class.

Start-pagina

Deze pagina heeft geen class toegevoegd aan de body.

<body>

body {
background : #FFF url(../images/head_1.gif) no-repeat left top;
}

De 2 volgende links

De volgende pagina 1 & pagina 2 hebben dezelfde class

<body class="drijf">

body.drijf {
background : #FFF url(../images/head_2.gif) no-repeat left top;
}

Pagina nummer 3, verkoop

De verkoopspagina heeft weer een nieuwe class

<body class="verkoop">

body.verkoop {
background : #FFF url(../images/head_3.gif) no-repeat left top;
}

De laatste 2 delen weer dezelfde class.

De volgende pagina 1 & pagina 2 hebben weer dezelfde class

<body class="contact">

body.contact {
background : #FFF url(../images/head_5.gif) no-repeat left top;
}

Besluit

Correcter zou zijn als je met id zou werken, daar deze altijd uniek is, een class kan dus ook, maar is minder correct.

Wat ik eigenlijk probeer duidelijk te maken met dit voorbeeld is dat je met weinig code je hetzelfde resultaat kan verkrijgen dan bijvoorbeeld (wat hetzelfde resultaat zou kunnen geven) je voor elke pagina een andere CSS zou moeten schrijven.

Minder code is gelijk aan minder data-traffic wat dan weer resulteert in minder kosten (voor bedrijven dan toch).