Manuel Bieh – Web Development & Consulting » Überlegung: Verschachtelte CSS Klassen

Überlegung: Verschachtelte CSS Klassen

Es ist ja allseits bekannt das man innerhalb eines Stylesheets, im Prinzip durch Verschachtelung, bestimmte Bereiche für unterschiedliche Ausgabemedien definieren kann:

@media screen {
    body { 
        background: white;
    }
}

Nachdem ich mich jetzt einige Wochen mit Typo3 und vor allem Typoscript beschäftigt habe, ist mir dort eine Syntaxschreibweise aufgefallen die dem ganzen sehr ähnelt, bzw genau genommen sogar 1 zu 1 gleicht:

page {
    bodyTag = &lt;body&gt;
    config {
        doctype = xhtml_strict
    }
}

Dies brachte mich auf die Idee, dass eine solche Syntax für CSS-Elementdeklarationen doch ebenfalls sehr praktisch wäre. So wäre es dadurch einfach möglich, mehrere Elemente mit dem gleichen „Parent-Element“ zu stylen. Was zum Beispiel für Navigationen durchaus praktisch wäre:

#navi {
    background: red;
    ul {
        /* Deklarationen */
        margin: 0;	
        li {
            /* Deklarationen */
            padding: 3px;
        }
    }
}

Würde in meinen Augen durchaus Sinn ergeben, und man könnte immer gleiche Angaben wie

#navi 
#navi ul
#navi ul li

schnell und unkompliziert zusammenfassen. Bei den Kaskadenregeln könnte eine Verschachtelung ja gleichwertig wie die #navi ul li-Schreibweise behandelt werden.

Bin ich der Einzige der so denkt? Gibt es dafür evtl bereits Diskussionen beim W3C? Gibt es Gründe die gegen die Ermöglichung einer solchen Schreibweise sprechen? Oder ist eine Implementierung in spätere CSS-Versionen vielleicht bereits in Planung?

Autor: Manuel
Veröffentlicht: 11.12.2006, 12:25 Uhr
Rubrik:

Webdev

Tags:
Diskussion: 7 Kommentare
Social Media:

7 Kommentare zu “Überlegung: Verschachtelte CSS Klassen”

Tino Flohe:
Dezember 11th, 2006 at 13:43
Also die Überlgeung an sich finde ich sehr geil. Ich persönlich finde es auch bei TYPO3 nach anfänglichem zweifeln jetzt doch recht praktisch und logisch. Gegen die ein Führung einer solchen schreibweise wird wohl die Abwärtskompatibilität stehen da frühere Browser-Versionen dies sicherlich nicht unterstüzten werden. ich gebe dir zu denken das man mehrere Klassen (hier dann z. B. class=“aussenabstand innenabstand“) auf Elemente anweden kann vieleicht hilft das ja mit dem einen oder anderem PHP-Script zum Erfolg. Das Beispiel trifft jetzt nicht genau ins schwarze mit der Anwendung aber im wesentlichen erleichtet es bei geschickter Anwendung auch das Gestalten.

Ansonsten ein durchaus interesanter Gedanke den du da hast.

Grüße Tino
Manuel:
Dezember 11th, 2006 at 14:11
naja, wenn abwärtskompatiblität ko-kriterium für neuerungen in standards ist, dann würden wir vermutlich immernoch websites nur mittels body, p, img, a und marquee gestalten. ich denke nicht das es an nem IE6 scheitern sollte nützliche änderungen in kommende standards einzubauen.

allerdings muss ich sagen das ich deine php überlegung ganz lustig finde. man könnte natürlich sein vereinfacht geschriebenes css durch den php parser jagen und wieder „korrektes“ raus machen. aber mal abgesehen vom sinn der ganzen sache wär das vermutlich ne ziemlich wackelige angelegenheit.

zumal man ohne das entsprechende php script zum konverten nurnoch ein nutzloses stylesheet hat.
Manuel:
Dezember 11th, 2006 at 14:12
Zum „konverten“, yo. Fat Denglish.
Hans-Jörg Hartmann:
Dezember 12th, 2006 at 08:50
Also, ich finde die „klassische“ Methode der Verschachtelung übersichtlicher – gerade in Verbindung mit einem CMS. Ich arbeite mich gerade in Joomla ein und da bin ich doch ganz angetan von der Möglichkeit, in einem Rutsch sowohl übergeordnete als auch spezifische Elemente stylen zu können.

Außerdem: wenn ich in meiner CSS-Datei quasi die HTML (bzw. PHP)-Struktur nachbaue (und danach sieht Dein Vorschlag aus) – bin ich dann nicht schon fast wieder dabei, die Trennung von Layout und Markup aufzugeben?

Grüße, Hans-Jörg
Rafael:
Dezember 12th, 2006 at 13:01
Rein prinzipiell gesehen, wäre so eine Notation eine angenehme und gute Sache. Man muss jedoch bedenken, dass diese Funktionalität in CSS bereits enthalten ist und somit kein wirklicher Mehrwert, was den Sprachumfang betrifft, entstehen würde. Ich mag es eher, wenn Sprachen so eindeutig wie möglich grammatikalisch formuliert werden, auch wenn dies gleichzeitig bedeutet, dass man an einigen Stellen unschöne Konstrukte bauen muss. Daher müsste nach meiner Logik so eine Schreibweise die bisherige ersetzen, was ich jedoch nicht für wahrscheinlich halte, da der dadurch entstandene Komfort eher marginaler Natur ist.

Des Weiteren bedeutet eine Verschachtelung in den meisten Fällen eine gewisse Unübersichtlichkeit. In so einem trivialen Beispiel kann dies zwar für einen Menschen leichter lesbar sein. Doch wo ein Mensch die Wahl hat, Unübersichtliches zu verwendet, tut er dies auch. Es würden höchstwahrscheinlich ulkige Verzweigungen entstehen, die dann im Nachhinein keiner mehr verstehen könnte.

Diese Idee hätte man vielleicht vor einigen Jahren berücksichtigen sollen, als der erste Standard in Entwicklung war.
Andi K:
Dezember 14th, 2006 at 18:03
Über solche (absolut sinnvollen) Konstrukte habe ich schon oft nachgedacht. Sie sollten selbstverständlich in den CSS-Standard aufgenommen werden. Das wird voraussichtlich aber frühestens mit CSS4 passieren, also noch ein Jährchen dauern bis alle Browser das verstehen. SIch ein script zu bauen ist eine Top-Idee – bislang hat sich das fürmich aber noch nicht gelohnt. Perfekt würde das ganze mit JavaScript Object Notation funktionieren – hier bei wäre noch nicht einmal ein Parser notwendig, denn JSOn sieht fast genauso aus wie CSS, außer dass Verschachtelungen nötig sind. Also wie würde man vorgehen: In eine JS-Dateikommt die Definition, in eine 2. Datei der „Parser“, das JSON-Objekt durchläuft und mit einen XPATH-Objektfinder benutzt (sicher besser als die Prototype-$$-Funktion, die noch imBetastadium ist) und dann die Styles zuordnet. Außerdem muss ein Observer eingerichtet werden,der neu hinzugefügte HTML-Elemente erkennt und Änderungen von Attributen überwacht. DOM2 kann sowas, aber nicht alle Browser können DOM2. Also wo würde ichs machen, hätte ich zeit ;))

Grüße aus Ulm

Andi

PS: CSS ist eher für Anfänger gemacht, auch die Selektor-Konstrukte (wie [name=Hallo]) sind undurchdacht. Besser ist da XPATH.
Patrick Beser:
Januar 22nd, 2007 at 09:46
Sehr gute Idee, die Verschachtelung innerhalb von CSS. Ich würde das auch gern verwenden und hatte auch schonmal die Idee, das Ganze mit PHP zu lösen und dann eben eine neue CSS-Syntax mit Verschachtelung zu verwenden. Aber die Ideallösung ist sowas ja leider auch nicht.