css in HTML

[trodape]

Wieso gibts eigentlich die Möglichkeit, css direkt ins HTML zu schreiben? Das wird ja sowieso überall als schlecht eingestuft...

 

[konzule]

Wenn du CSS in HTML einbindest werden die zuvor gesetzen eigenschaften geändert. Is manchmal für gewisse unterseiten nicht schlecht wo es nur eine gewisse eigenschaft gibt. Klar gehts auf kosten der Lesbarkeit des HTML Codes aber wenn ich für jeden kleinsten scheiss ne CSS Klasse/ID schreibe siehts in der Stylesheet Datei nicht viel anders aus xD. Für kleine Projekte brauchts man eigentlich nicht... für größere ist es schon manchmal hilfreich einen style im Tag einzubinden.

 

[threadi]

Das fragte ich mich auch mal, bis ich auf einen Anwendungsfall traf:
Eine Liste von 6 Listenelementen von denen je 3 in einer Reihe stehen. In jedem Listenpunkt ist wiederum ein per CSS ausklappbares Element, welches absolut positioniert ist. Damit dieses absolut positionierte Element nun über dem darunterliegenden Listenelement liegt muss man den Listenelementen ebenfalls einen z-index geben - absteigend in der Reihenfolge der Listenpunkte. Das geht mir purem CSS derzeit noch nicht zu realisieren (es gibt Entwürfe dafür, aber kein Browser unterstützt so etwas), weshalb man den z-index-Wert in den HTML-Code schreiben muss .. :/

 

[Banana_Jones]

Das fragte ich mich auch mal, bis ich auf einen Anwendungsfall traf:
Eine Liste von 6 Listenelementen von denen je 3 in einer Reihe stehen. In jedem Listenpunkt ist wiederum ein per CSS ausklappbares Element, welches absolut positioniert ist. Damit dieses absolut positionierte Element nun über dem darunterliegenden Listenelement liegt muss man den Listenelementen ebenfalls einen z-index geben - absteigend in der Reihenfolge der Listenpunkte. Das geht mir purem CSS derzeit noch nicht zu realisieren (es gibt Entwürfe dafür, aber kein Browser unterstützt so etwas), weshalb man den z-index-Wert in den HTML-Code schreiben muss .. :/

War hier :nth-child keine Möglichkeit?

 

[threadi]

Ja, wenn man wirklich nur 6 Listenpunkte hat. Wenn die Liste aber beliebig lang sein könnte, dann schreibt man im schlimmsten Fall 300 Zeilen nth-child-Eigenschaften in die CSS Datei ;)

 

[Tronjer]

Das geht mir purem CSS derzeit noch nicht zu realisieren (es gibt Entwürfe dafür, aber kein Browser unterstützt so etwas), weshalb man den z-index-Wert in den HTML-Code schreiben muss .. :/

Verstehe ich jetzt gerade nicht.

Ein z-index-Wert innerhalb HTML wäre Inline-CSS, und was sich inline schreiben lässt, kann man auch in eine Datei auslagern.

 

[threadi]

Klar, für jedes <li>-Element eine ID vergeben und der ID per CSS dann den z-index zuweisen .. ;) Mach das mal bei mehreren Dutzend solcher Elemente. Das kann man per PHP oder anderweitig generieren, aber nicht bei puren HTML-Dateien.

 

[Tronjer]

Klar, für jedes <li>-Element eine ID vergeben und der ID per CSS dann den z-index zuweisen .. ;) Mach das mal bei mehreren Dutzend solcher Elemente. Das kann man per PHP oder anderweitig generieren, aber nicht bei puren HTML-Dateien.

Oder man müsste im CSS sehr lange und verschachtelte Selektoren schreiben, was natürlich wesentlich mehr Aufwand bedeutet. Andererseits geht man durch Inline-CSS das Risiko ein, dass sich Änderungen an den Global Styles nicht oder in unerwünschter Weise in einzelnen Unterseiten auswirken könnten. Bei kleinen Projekten mit wenigen Seiten lässt sich dieses Risiko noch überschauen, aber bei großen, gewachsenen Portalen mit viel Legacy Code hat man nicht mehr alles im Überblick.

Ich fahre da eine andere Strategie. Auf der obersten Ebene liegt bei mir (sofern gewünscht oder erforderlich) ein Framework wie Compass oder Bootstrap. Dazu eine weitere Datei, welche gesetzte Less oder Sass Variablen eventuell neu setzt, bzw. für die Custom Styles neue hinzufügt. Die Framework-Klassen selber überschreibe ich nie und versuche auch, soweit wie möglich damit auszukommen.

Für die Unterseiten erstelle ich jeweils einen eigenen Namespace, in dem ich dem Body-Tag den Namen des Views und des Moduls in dem sich der View befindet als CSS-Klasse mitgebe. Dafür kann man sich einen Helper bauen. Innerhalb des Namespace schreibe ich dann modular die CSS-Anweisungen als Less oder Sass, also etwa so:

body.user.index {
  .main {
    ul {
      li {
        ..........
      }
    }
  }
}

Vor dem deployen werden alle Custom Less Dateien zu einer gemeinsamen Datei kompiliert und minified.