• Forside
• Idékassen
• Artikler/erfaringer
• Links
• Om softspot

• ASP 3.0
• HTML og CSS
  • Styling af sider
• JavaScript
• ASP.NET
• Umbraco

Genbrug af HTML og styling med CSS

Når man opbygger sider vil man typsik gerne kunne style indholdet så det passer til det aktuelle formål og det kan man gøre på flere måder. Denne erfaring går ud på at hvis man laver elementer som skal genbruges i andre sammenhænge, f.eks. en liste med de seneste 10 nyheder, så kunne man sagtens forestille sig, at den kunne bruges flere steder og med forskellige styles.

En måde at håndtere dette indhold på, er at style det inline, således style og indhold blandes sammen. Det er nok den hurtigste måde at få et brugbart resultat i den enkelte situation, men ifht. genbrugelighed, er det langt fra optimalt, da de styles man har lavet det ene sted sandsynligvis ikke kan genbruges det andet sted.

Derfor anbefaler jeg at man sørger for at lave indholdet så simpelt som muligt og med så få layoutmæssige beslutninger som muligt, så det kan styres med styles andetsteds fra. Hvis man ønsker en gruppering af sine styles, kan man lægge elementet ind i et div-element med en class, som man så tager udgangspunkt i, når indholdet skal styles.

Eksempel:

Selve nyhedslisten ser således ud og kan være dynamisk genereret eller statisk html som inkluderes i en given side:

<h3>Seneste nyheder</h3>
<ul>
  <li>Nye ventiler</li>
  <li>Udsalg på varmevekslere</li>
  <li>Aktuator lanceres</li>
</ul>

Når så listen skal placeres på en side, f.eks. i højre side af en eller anden side på sitet, kunne den se således ud:

<div class="nyhedersmal">
  <h3>Seneste nyheder</h3>
  <ul>
    <li>Nye ventiler</li>
    <li>Udsalg på varmevekslere</li>
    <li>Aktuator lanceres</li>
  </ul>
</div>

Stylen til ovenstående kan så benytte CSS-klassen som ankerpunkt for styling af nyhedslisten:

.nyhedersmal {
  width: 130px;
}
.nyhedersmal h3 {
  font-size: 12px;
  font-weight: bold;
}
.nyhedersmal ul {
  margin-left: 0px;
  list-style-type: none;
}

På samme måde kunne man, på samme site, men en anden side have samme nyhedsliste. For at kunne styre stylingen særskilt på de enkelte sider, lægges listen i et div-element med en anden CSS-klasse:

<div class="nyhederbred">
  <h3>Seneste nyheder</h3>
  <ul>
    <li>Nye ventiler</li>
    <li>Udsalg på varmevekslere</li>
    <li>Aktuator lanceres</li>
  </ul>
</div>

Stylen til ovenstående kan så benytte den nye CSS-klasse som ankerpunkt for styling af nyhedslisten på den brede side:

.nyhederbred {
  width: 430px;
  background-image: url(/images/nyhedsbaggrund.jpg);
}
.nyhederbred h3 {
  font-size: 14px;
  font-weight: bold;
}
.nyhedersmal ul {
  margin-left: 0px;
  list-style-type: none;
}

Ovenstående eksempel illustrerer altså udskydelse af beslutningen om, hvordan indhold skal styles til så sent som muligt og så langt væk fra selve indholdet som muligt (i dette tilfælde ud på den side hvor indholdet skal forekomme). Det øger som sagt muligheden for at genbruge indholdet andre steder, uden at man behøves at tage stilling til om stylingen passer på den aktuelle side.