CSS oder nicht?

[Jeena Paradies]

Hallo,

Hallo,

ich benötige an einigen Stellen die Angabe "padding-left:8em".
Ist es da wirklich sinnvoll, dies in externe CSS-Datei auszulagern?

Ja.

Es geht darum den Inhalt vom Aussehen komplett abzukoppeln damit man den gleichen Inhalt (HTML) für verschiedene Ausgabegeräte komplett anders und sinnvoll formatieren kann (CSS).

Dein Beispiel ist z.b. auf dem iPhone völlig unnütz, denn da würde dann nur noch die hälfte des sowieso sehr engen Bildschirms für die Ausgabe bleiben.

Besser ist es die Klassen nach dem Inhalt zu benennen. Da du leider nicht sagst was das für Inhalt ist können alle hier nur raten und ranten, ohne dass sie dir auch nur im Ansatz weiterhelfen. Ich mache mal ein kleines Beispiel:

Nehmen wir an du möchtest eine Warnung immer mit einem margin von 8em nach links haben, zumindest auf dem normalen Desktop, dann wäre dein HTML so aussehen:

<article>  
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>  
 <p>Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</p>  
 <p class="warning"><strong>Warnung:</strong> Achtung! Dies ist eine Warnung.</p>  
 <p>Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>  
 <ul>  
  <li>Duis</li>  
  <li>aute</li>  
  <li>irure</li>  
 </ul>  
 <p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla</p>  
 <p class="warning"><strong>Warnung:</strong> Noch eine Warnung.</p>  
 <p>Pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui</p>  
 <p>Officia deserunt mollit anim id est laborum.</p>  
</article>

Dies ist das HTML, nirgendwo steht irgend etwas darüber wie es aussehen soll. Das Aussehen wird grundsätzlich _immer_ über eine externe CSS-Datei gesteuert. Ich habe immer verschiedene Dateien für verschiedene Media-Typen, die da zur zeit meist wären "screen" für normale Desktop-Bildschirme, "print" für Drucker und dann noch mit ein paar kleineren Tricks etwas für "handheld" Devices wie z.b. das iPhone. Die einzelnen Dateien könnten dann so aussehen (ich schreibe da nur das CSS für die Warnung rein, das andere kann man sich ja dazu denken):

/* screen.css */  
.warning {  
 color: red;  
 margin-left: 8em;  
 border: 1px solid red;  
}

/* iphone.css */  
.warning {  
 color: red;  
 margin-left: 2em; /* auf dem iPhone gibt es nicht all zu viel Platz */  
 border: 1px solid red;  
}

/* print.css */  
.warning {  
 color: black; /* die meisten Drucker drucken Schwarz-Weiß */  
 margin-left: 8em;  
 border: thin dashed black; /* Die rote dünne Linie würde nicht auffallen */  
}

Dadurch dass man einen sinnvollen Klassennamen (am besten auch in Englisch) wählt, versteht jeder der den code anschaut was das ganze tun soll, auch man selbst, wenn man 5 Jahre später daran etwas ändern müsste. Und man kann, falls neue Anzeigegeräte mit der Zeit auftauchen, einfach nur eine zusätzliche CSS-Datei dazu machen ohne den HTML code auch nur anzufassen, vor allem an den Stellen die man sowieso komplett vergessen hat.

Jeena