Wann CSS auslagern, wann nicht?

[phil]

Hallo da draußen.

Ich mache mal ein Beispiel und stelle euch anschließend eine Frage.

<ul>
<li style='float:left'><a href='#'>A</a></li>
<li><a href='#'>B</a></li>
<li><a href='#'>C</a></li>
<ul>

Wie ihr seht wurde dem ersten Listen-Element ein float:left gegeben.
Es steht direkt im Quelltext - ist nicht in einer externen CSS-Datei ausgelagert.

Nun sagen die einen "ALLES AUSLAGERN".
Halte ich aber für völligen Schwachsinn.

Warum sollte ich aus

<ul>  
<li style='float:left'><a href='#'>A</a></li>  
<li><a href='#'>B</a></li>  
<li><a href='#'>C</a></li>  
<ul>

nun

<ul>  
<li class='float_left'><a href='#'>A</a></li>  
<li><a href='#'>B</a></li>  
<li><a href='#'>C</a></li>  
<ul>

und in einer externen Datei: .float_left{float:left;}
angeben?

Selbst wenn es mehrmals vorkommen sollte das ich _nur ein_ float:left angeben möchte, macht es keinen Sinn diese auszulagern.
Die Angabe einer Klasse ist für den Browser aufwendiger zu parsen als die direkte Angabe und Traffic wird ebenso wenig gespart.

Eure Meinungen und Erfahrungen und Empfehlungen dazu!

Gruß, Phil

[bleicher]

Grüße,
den gesparten traffic darfst du dann am jahresende nutzen um eine 404 seite anzukuken!

IMHO - lagere nichts aus, bei der nächsten Umstellung verfluchst du alles unter dem Mond und alles hinter dem Mond und lagerst von da an ganz von alleine alles aus.
MFG
bleicher

[Richard]

Hallo phil,

Warum sollte ich aus […] und in einer externen Datei: .float_left{float:left;}
angeben?

Weil Inhalt und Darstellung getrennt gehören. Was machst Du, wenn Du für dasselbe Markup verschiedene Layouts angeben willst, bspw. für verschiedene Endgeräte?

Grüße
Richard

[Felix Riesterer]

Lieber phil,

(X)HTML-Markup soll einen Sinn transportieren, kein Aussehen. Daher solltest Du (der reinen Lehre nach) einen Klassennamen zuweisen. Dein "float_left" ist alles andere als ein "Sinn transportierender" Klassenname. Da wäre "aktuell" oder "angewaehlt" respektive ihre englischen Pendants schon wesentlich sinnvoller.

Auch wenn Du das jetzt bei der Überschaubarkeit Deines Projektes vielleicht als unnötig umständlich erachtest, so kann doch bei einem kompletten Re-Design gerade soetwas sehr nützlich sein, da Du Deine Finger komplett vom Markup lassen kannst.

Im Übrigen ist es besonders bei verschachtelten Navigationen (aka Listen) von besonderem Vorteil, wenn Du mit einer Klasse arbeitest...

Liebe Grüße,

Felix Riesterer.

[Beat]

Ich mache mal ein Beispiel und stelle euch anschließend eine Frage.
<ul>
<li style='float:left'><a href='#'>A</a></li>
<li><a href='#'>B</a></li>
<li><a href='#'>C</a></li>
<ul>

Wie ihr seht wurde dem ersten Listen-Element ein float:left gegeben.
Es steht direkt im Quelltext - ist nicht in einer externen CSS-Datei ausgelagert.

Nun sagen die einen "ALLES AUSLAGERN".
Halte ich aber für völligen Schwachsinn.

CAPSLOCK-Aussagen und schwachsinnige Beispiele sind eine schlechte Diskussionsgrundlage.

Warum sollte ich ......

Meinen Feinden wünsche ich immer schlechten Code.

mfg Beat

[ad]

CAPSLOCK-Aussagen und schwachsinnige Beispiele sind eine schlechte Diskussionsgrundlage.

Warum sollte ich ......

Meinen Feinden wünsche ich immer schlechten Code.

Wie bist Du denn drauf??

[phil]

CAPSLOCK-Aussagen und schwachsinnige Beispiele sind eine schlechte Diskussionsgrundlage.

Warum sollte ich ......

Meinen Feinden wünsche ich immer schlechten Code.

Wie bist Du denn drauf??

Nunja - letztendlich ist jeder hier ein Konkurrent des anderen. Allerdings ist es dies auszulassen in einer Community weniger angebracht.

[Beat]

Nunja - letztendlich ist jeder hier ein Konkurrent des anderen. Allerdings ist es dies auszulassen in einer Community weniger angebracht.

Meinst du damit meine Äusserung, oder meinst du damit jene, die Flamewars initiieren?

mfg Beat

[Gunnar Bittersmann]

@@phil:

nuqneH

<ul>

<li class='float_left'><a href='#'>A</a></li>
<li><a href='#'>B</a></li>
<li><a href='#'>C</a></li>
<ul>

  
Nicht so, sondern  
  
~~~html
<ul>  
  <li><a href='#'>A</a></li>  
  <li><a href='#'>B</a></li>  
  <li><a href='#'>C</a></li>  
<ul>

und in einer externen Datei: .float_left{float:left;} angeben?

Nicht so, sondern

li:first-child { float: left }

Bzgl. extern oder nicht gilt das in Stylesheet extern oder nicht Gesagte.

Qapla'

[Encoder]

und in einer externen Datei...

Du kannst es doch auch in die gleiche Datei packen.

Ich lagere das aus, was ich mehrmals brauche oder was in irgendeiner Weise "persistent" ist.
Wenns dann mal drum geht dass 20 Gästebucheinträge pro Seite für einen Tag lang anders dargestellt werden, darf der Style auch schon mal direkt im Script stehen und steht dann halt 20 mal in der ausgegebenen Datei. Oder wenn ich irgendwas an einer bestimmten Stelle z.B. rot und fett haben will.
Aber allgemein ists schon schön wenn man weiß wo Styleangaben zu finden sind.

[Der Martin]

Hallo,

Ich mache mal ein Beispiel und stelle euch anschließend eine Frage.

<ul>
<li style='float:left'><a href='#'>A</a></li>
<li><a href='#'>B</a></li>
<li><a href='#'>C</a></li>
<ul>

Eure Meinungen und Erfahrungen und Empfehlungen dazu!

ich finde, deine Frage stellt sich so eigentlich gar nicht. Seit ich CSS bewusst einsetze (und das ist etwa seit 2000/2001 der Fall), hatte ich kein Web-Projekt, nicht mal eine einzelne Seite, wo das Stylesheet nicht wenigstens 20..30 Zeilen hat.

Daher kommt mir dein Szenario "wegen nur einer CSS-Definition" etwas weltfremd vor, ein zentrales Stylesheet lohnt sich bei realen Projekten IMHO *immer*.

Übrigens: Wenn's wirklich nur diese eine Definition ist -etwa weil es sich nur um ein Experiment oder ein Beispiel handelt- würde ich die Definition zwar nicht als separate Datei/Ressource auslagern, aber immer noch in ein zentrales Stylesheet im head setzen; als style-Attribut direkt am Element nur, wenn's mal quick&dirty zum Ausprobieren ist.

Ciao,
 Martin