CSS Objekthierarchie

[iXeu]

Hallo liebe Community,

eine kurze aber prägnante Frage:
Gibt es so etwas wie Objekthierarchie in CSS?

Einen Ansatz für objektorientiertes CSS gibt es ja (OOCSS), aber Objekthierarchie?


Wäre euch wirklich sehr dankbar über Hilfe in jeder Art!
Danke und liebe Grüße
iXeu

 

[Wustersoss]

Einen Ansatz für objektorientiertes CSS gibt es ja

Was soll das sein?

 

[iXeu]

Was soll das sein?

Weblog :: Kurz erklärt: OOCSS von Nicole Sullivan » Hans Bauer Bammental

zum Beispiel, google nach OOCSS oder Nicole Sullivan

 

[Wustersoss]

Dort steht aber auch:

Ein Nachteil von OOCSS ist sicherlich, dass man mehr schreiben muss (weil die sogenannten short hands im CSS nicht mehr vorhanden sind, bzw. gemäß dem DRY-Prinzip nicht mehr angewendet werden dürfen). Das betrifft allerdings nicht nur das CSS, sondern auch das HTML.

Das heisst für mich im Umkehrschluss, das ich im HTML schon festlege wie ein Element aussieht, auch wenn es nur eine Auszeichnungsklasse ist.
Das ist somit ein eklantanter Verstoss gegen die Trennung von HTML und Design.

Ein Optimales CSS sieht keine Ids und nur wenige Klassen im Stylesheet vor.

Redundanzen im CSS lassen sich durch Verstehen und Anwenden der Vererbungsregeln lösen.

Dann steht dort weiter:

Der Vorteil jedoch ist, dass man nichts mehr doppelt schreibt und so später einmal bei allen Boxen auf einmal, egal welcher Farbe, die Rahmenstärke ändern kann.

Sorry, aber die Klassenattribute im Html schreibe ich doppelt.

Der Ansatz ist falsch.

Wenn ich alle Rahmen aller Absätze mit sagen wir einer braunen Linie versehen will, dann mach ich das nicht so:

<p class="rahmen braun duenne_linie"> Lorem ...</p>
<p class="rahmen braun duenne_linie"> Lorem ...</p>

sondern so>

<p> Lorem ...</p>
<p> Lorem ...</p>

Im CSS gebe ich an

p{border: 1px solid brown;}

will ich auch die Überschrift h3 im Container Werbung so haben dann schreibe ich das dazu:

div#Werbung h3, p {border: 1px solid brown;}

Damit habe ich das an einer Stelle definiert und spare mir die ganzen Klassen.

Wer sich das ausgedacht hat mit OOCSS hat meiner Meinung nach das Konzept von CSS und HTML nicht verstanden.

Don’t call it Object Oriented and if you need a “framework” for CSS you have MUCH bigger problems…

#grins#
Quelle: Ein Kommentar bei First Look: Object Oriented CSS » SitePoint

EDIT: Lesenwert dazu der Artikel http://meiert.com/de/publications/talks/20090527/

 

[Tronjer]

Mit Frameworks wie Less und Sass lassen sich Redundanzen beim Schreiben von CSS-Code vermeiden.

 

[Wustersoss]

Ein Framework nur um eine Webseite zu erstellen? (in Unternehmen mit mehreren Entwicklern mal ausgenommen)
Ist das nicht ein wenig overkill.

 

[dazzle89]

@Wustersoss:

Wieso schreibst du "div#werbung" und nicht einfach nur "#werbung" ? Es macht doch keinen Sinn, wenn man bei IDs jedes Mal den Selektro davor schreibt, ich denke man kann sich somit ein wenig Code sparen.

 

[Wustersoss]

Wieso schreibst du "div#werbung" und nicht einfach nur "#werbung" ? Es macht doch keinen Sinn, wenn man bei IDs jedes Mal den Selektro davor schreibt, ich denke man kann sich somit ein wenig Code sparen.

Das mache ich aus Gewohnheit, weil ich PSPAD benutze und im Selector tree alles alphabetisch sortiert wird. Da finde ich dann die Ids schneller. Nicht alle Ids sind immer ein Div. Somit spart es einfach bei der Wartung und Fehlersuche jede Menge Zeit. Ist halt aus der Praxis heraus entstanden.

 

[dazzle89]

Ok danke, dann kann ich das verstehen. Ich selbst benutze kein PSPad, daher schreibe ich bei IDs auch nicht bzw. nur selten die Selektoren davor. :lol:

 

[Anusha]

Ein Optimales CSS sieht keine Ids [...] im Stylesheet vor.

Kannst du das begruenden? Ich hab das so noch nirgendwo gelesen.

 

[Wustersoss]

Ich hab das so noch nirgendwo gelesen.

Dann kennst du die richtigen Seiten nicht. Sagt dir Google oder GMX.de etwas?
Würdest du sagen, dass die Leute dort Ahnung haben?

Wenn du das mit Ja beantworten kannst dann lies mal bei Jens Meiert im Blog:
Schlechtes HTML ist teuer (und weitere Weisheiten)
und weitere Themen:
Conditional Comments, Resets, Frameworks

Weiterer Artikel:
Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design

Buchempfehlung: Designing with Web Standards (Voices That Matter): Jeffrey Zeldman, Ethan Marcotte: 9780321616951: Englische Bücher


Google schreibt in den Empfehlungen für Webmaster:
"Überprüfen Sie die Leistung Ihrer Website und optimieren Sie Ladezeiten. Google ist bestrebt, seinen Nutzern möglichst relevante Suchergebnisse und eine großartige Nutzererfahrung zu bieten. Schnelle Websites erhöhen die Zufriedenheit der Nutzer und verbessern die Gesamtqualität des Webs, insbesondere für Nutzer mit einer langsamen Internetverbindung. Wir hoffen, dass Webmaster durch die Verbesserung ihrer Websites auch zu einem insgesamt schnelleren Web beitragen"

Und so weiter...

 

[Anusha]

Also willst du drauf hinaus, dass die Verwendung von #ids die Ladezeiten erhoeht und das Web langsamer machen ( auf die Geschwindigeit und Performance zielen ja einige deiner Links hinaus) ...
Darueber hinaus sehe ich in keinem deiner Links ein eindeutiges Votum gegen die Verwendung von #ids.


Wenn ich dann sowas lese:

Klassen- und ID-Selektoren sind sich sehr ähnlich. Im Grunde genommen könnte man anstelle des ID-Attributs ein class-Attribut benutzen und das class-Attribut im HTML-Dokument nur ein einziges Mal verwenden. Allerdings wäre dieses Anwendung sehr fehlerträchtig. Darüber hinaus wird das ID-Attribut von Skripten benutzt, um ein Element eindeutig zu identifizieren. Die Identifikation über das Klassen-Attribut wäre sehr mühsam und langsamer.

Macht mich das schon stutzig.
Ich habe schon einige Buecher ueber modenere Webgestaltung, fortgeschrittenes CSS usw. gelesen.
Aber in keinem dieser Buecher ( die teilweise von renomierten Webentwicklern stammen) habe ich davon gelesen ids zu meiden.

Und gerade im Zusammenhang mit Javascript und Ajax - Calls ist es fuer mich unentbehrlich auf ids zu setzen.
Auch fuer Elemente die garantiert unique sind wie zum Beispiel ein #wrapper der den Content einhuellt, sehe ich keinen Sinn eine Klasse zu benutzen.

 

[Wustersoss]

Also damit wir uns nicht falsch verstehen. Wer JQuery oder Motools oder eine andere Javascript Bibliothek einsetzt wird sicherlich einige Elemente mit IDs versehen müssen. Es ist auch nicht grundsätzlich etwas gegen Ids zu sagen nur sollte man deren Einsatz wie alles was man macht abwägen.
Ich schrieb ja auch optimales CSS. Das es in der Praxis nur eine Annäherung sein kann ist doch klar. Optimal ist es so gut wie nie, nur schlecht sollte es nicht sein.

Und du schreibst es macht dich stutzig. Es wird doch gesagt das Ids für Scripte notwendig sind:
Auszug aus dem Zitat.

Darüber hinaus wird das ID-Attribut von Skripten benutzt, um ein Element eindeutig zu identifizieren.

Und ja, es geht um Geschwindigkeit. Keiner wartet gern auf Webseiten und warum sollte man die Ladezeiten unnötig erhöhen, zumal es in einer zunehmend mobilen Internetwelt Geld kostet.

Auch fuer Elemente die garantiert unique sind wie zum Beispiel ein #wrapper der den Content einhuellt, sehe ich keinen Sinn eine Klasse zu benutzen.

Sagt ja auch keiner, aber unter Umständen kann man den Wrapper ganz einsparen.

Oft sieht man solche Konstrukte:

<body>
    <div id="wrapper">
        <div id="inner-html">
            <div id="header">
                <div id="inner-header">

Ich bin mir ziemlich sicher das man das auch so schreiben kann und zum gleichen Ergebnis kommt:

<body>
    <div id=head>

Das Frage ist doch warum HTML Code immer unnötig aufgebläht sein muss.
Ein CSS Stylesheet lade ich nur einmal für die ganze Webpräsenz, egal wieviele Seiten auf meiner Webpräsenz sich der User ansieht, die CSS-Datei wird aus dem Cache geladen und nicht wieder angefragt beim Server. Somit wird nur das HTML aktualisiert. Jede Seite die aber 1Kb mehr unützen Code mit sich herumschleppt lade ich immerzu erneut herunter. Das macht bei 20 betrachten Seiten schon 20 Kb.

Darum geht es und um sonst nichts.

 

[struppi]

Ich bin mir ziemlich sicher das man das auch so schreiben kann und zum gleichen Ergebnis kommt:

<body>
    <div id=head>

oder

<body>
    <h1>

 

[Anusha]

Das Aufblaehen des Html-Codes hat aber nichts mit der Benutzung von Ids zu tun. Ich kann meinen Code genauso mit der Benutzung von Klassen unnoetig aufblaehen.

Und fuer das strukturelle Layout einer Homepage sind doch Ids geradezu praedestiniert und verursachen sicherlich keinen Perfomanceverlust.

Ich kann mich einfach mit der Aussage, dass ein optimales Stylesheet keine Ids verwendet nicht anfreunden.

 

[iXeu]

Danke für die rege Diskussion, das ist wirklich interessant!
Dennoch würde ich gerne zu meiner Ausgangsfrage zurückkehren - obwohl ich mir die wohl mittlerweile mit "nein" beantworten kann, oder?

Danke!

 

[Tronjer]

Danke für die rege Diskussion, das ist wirklich interessant!
Dennoch würde ich gerne zu meiner Ausgangsfrage zurückkehren - obwohl ich mir die wohl mittlerweile mit "nein" beantworten kann, oder?

Danke!

Das hatte ich mit dem Hinweis auf Less und Sass schon beantwortet. Man kann dort zwar keine Objekte erzeugen, aber es existiert eine minimale Programmlogik mit Variablen, parametrischen Funktionen (Mixins) und Hierarchien (Nested Rules). So etwas kann bei größeren Projekten oder im Hinblick auf spätere Wiederverwendbarkeit durchaus Sinn machen.

Nachteilig ist dabei allerdings, dass mit diesen Frameworks erstellte Stylesheets vor dem Aufruf der entsprechenden Webseite in vanilla CSS kompiliert werden müssen.

 

[mermshaus]

LESS und Sass sind mehr „Präprozessoren“ als „Frameworks“, wenn man so will. Oder anders gesagt: Beide Projekte definieren eine eigene Stylesheet-Sprache, die in echtes CSS kompiliert wird.

Ich habe übrigens noch nicht verstanden, wie objektorientiertes CSS aussehen sollte.

OOCSS ist wohl grob vergleichbar mit Mixins in LESS und Sass.

- LESS « The Dynamic Stylesheet language
- File: SASS_REFERENCE

Allerdings tauchen die Mixin-Verweise nicht im HTML-Code auf. Das ist bei OOCSS nämlich wirklich nicht schön.

PS: Ich bin auch sehr dafür, nach Möglichkeit keine IDs als Styling-Hooks zu verwenden.