Advertisement
  1. Code
  2. HTML & CSS

Objektorientiertes CSS: Was, wie und warum

Scroll to top
Read Time: 18 min

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Es klingt wie ein Oxymoron oder zumindest eine Unmöglichkeit, nicht wahr? Wie kann eine statische Sprache, die eher Markup als Programmierung ähnelt, objektorientiert sein? In diesem Tutorial werde ich Ihnen die Idee des objektorientierten CSS vorstellen, Ihnen zeigen, wie es funktioniert, und versuchen, Sie davon zu überzeugen, dass Sie es auch verwenden sollten!


Was ist objektorientiertes CSS?

Objektorientiertes CSS schreibt im Kern einfach saubereres DRYer-CSS. Es ist keine andere Sprache: immer noch das gleiche alte CSS, das wir alle kennen und lieben. Es ist nur ein Paradigmenwechsel. Objektorientiertes CSS besteht aus ein paar einfachen Mustern und Best Practices.

Warum also objektorientiert? Nun, laut Wikipedia,

Objektorientierte Programmierung (OOP) ist ein Programmierparadigma, das "Objekte" - Datenstrukturen aus Datenfeldern und Methoden - und deren Wechselwirkungen zum Entwerfen von Anwendungen und Computerprogrammen verwendet.

Wenn wir diese Definition für objektorientiertes CSS neu schreiben würden, könnte sie ungefähr so lauten:

Objektorientiertes CSS ist ein Codierungsparadigma, das "Objekte" oder "Module" - verschachtelbare HTML-Abschnitte, die einen Abschnitt einer Webseite definieren - mit robusten, wiederverwendbaren Stilen formatiert.

Dies bedeutet im Grunde, dass Sie ein Standard- "Objekt" (eine HTML-Struktur) haben. Dann haben Sie CSS-Klassen, die Sie auf Objekte anwenden, die das Design und den Fluss des Objekts definieren.

Verwirrt? Schauen wir uns ein bisschen Theorie an.


Was ist die Theorie dahinter?

Nicole Sullivan's PresentationNicole Sullivan's PresentationNicole Sullivan's Presentation

Es gibt zwei Hauptprinzipien [in objektorientiertem CSS]: Das erste besteht darin, die Struktur von der Haut zu trennen, und das zweite darin, den Container vom Inhalt zu trennen.

Ich zitiere Nicole Sullivan, deren Idee objektorientiertes CSS ist. Wie spielen sich diese beiden Prinzipien ab?

Wenn Sie die Struktur von der Haut trennen, sind Ihr Layout-Styling und Ihr Design-Styling getrennt. Ein sehr praktischer Weg, dies zu tun, ist die Verwendung eines Rastersystems; es gibt viele Optionen, oder Sie können Ihre eigenen erstellen. Wenn Sie kein Rastersystem verwenden, definieren Sie wahrscheinlich nur die Struktur des primären Objekts auf Ihrer Seite. Das werden wir heute tun.

Das Trennen des Containers vom Inhalt bedeutet, dass sich jedes Objekt (der Container) anpassen kann, um jeden Inhalt zu akzeptieren. Zum Beispiel sollte es kein h3 oben geben müssen, gefolgt von einer ungeordneten Liste, damit es richtig aussieht. Dies ermöglicht Flexibilität und Wiederverwendbarkeit, was von größter Bedeutung ist.


Warum sollte ich so codieren?

Es gibt einige gute Gründe, warum Sie Ihr CSS objektorientiert schreiben möchten. Einer der größten Vorteile - und wir haben es bereits erwähnt - ist, dass Ihr CSS wiederverwendbarer ist. Ihre Stylesheets sollten aber auch viel kleiner werden. Objektorientiertes CSS sollte es einfacher machen, das Design einer Site zu ändern.

Wenn Sie Ihr Styling auf diese Weise schreiben, können Sie auch beruhigt sein: Es ist viel einfacher, Teile Ihrer Website zu ändern, ohne Dinge zu beschädigen. Mit objektorientiertem CSS können Sie Ihre Site auch konsistent ändern.


Wie übe ich objektorientiertes CSS?

Wenn Sie so weit gekommen sind, interessiert Sie, wie genau Sie CSS mit einer objektorientierten Denkweise schreiben. Auf geht's!

Der erste Schritt ist die Vorbereitung auf das CSS: Sie müssen Ihr HTML-Objekt bestimmen. Im Allgemeinen verfügt Ihr Objekt über eine Kopf-, Körper- und Fußzeile, obwohl Kopf- und Fußzeile optional sind. Hier ist ein sehr einfaches Objekt.

Bevor Sie "DIVITIS!" erkennen, dass dies nicht so schlimm ist, wie es aussieht; bedenken Sie:

Mit HTML5 haben wir jetzt ein Objekt mit semantischer Bedeutung und ohne suppenähnliche Eigenschaften. Eigentlich ist dies das Objekt, das wir heute verwenden werden.

Wenn wir CSS schreiben wollen, brauchen wir etwas zum Stylen. Lassen Sie uns also eine sehr einfache Vorlage erstellen: eine Blog-Homepage und eine einzelne Post-Seite. Wir werden heute ein paar HTML5-Elemente und etwas CSS3-Styling verwenden!

index.htm

Ich weiß, dass es ziemlich lang ist, deshalb hier ein Diagramm unserer Grundstruktur:

layoutlayoutlayout

Ähnlich aussehend? Das ist unser Objekt, mit einer Seite für unsere Seitenleiste. Wir werden uns die einzelne Post-Seite etwas später ansehen, aber lasst uns jetzt in CSS einsteigen!

Sie werden feststellen, dass wir auf drei Stylesheets verlinken: reset.css, text.css und styles.css. Reset.css ist Eric Meyers Reset. Text.css ist wichtig: Der zweite Schritt des objektorientierten CSS besteht darin, einige wichtige Grundelemente zu gestalten. In der Regel handelt es sich dabei um Textelemente wie Überschriften und Listen. Das Styling dieser Objekte ist wichtig, da es das einheitliche Erscheinungsbild der Site bestimmt. Diese Elemente erhalten größtenteils kein zusätzliches direktes Styling.

Folgendes haben wir in unserer text.css:

(Hut ab vor dem 960 Grid System, dessen text.css-Datei dies ist.)

Jetzt beginnen wir mit der Erstellung von styles.css. Hier beginnt die objektorientierte Magie. Ich werde jedoch zunächst nur einige Stile der obersten Ebene einfügen, um einen Hintergrund für den Körper sowie einige Link- und Listenstile festzulegen.

Unsere erste Aufgabe besteht darin, die Struktur der Seite zu definieren:

Beachten Sie, dass wir unser Containerobjekt formatieren, indem wir alle unsere Selektoren mit #container starten. Dies ist jedoch ein Sonderfall: Normalerweise möchten Sie Klassen verwenden, da diese frei wiederverwendbar sind.

Wir können Klassenselektoren für unser Post-Styling verwenden:

Schauen wir uns an, was dieses CSS objektorientiert macht. Erstens haben wir die Klasse nicht auf ein bestimmtes Element beschränkt. wir könnten es zu allem hinzufügen. Dies gibt uns die größtmögliche Flexibilität. Beachten Sie dann, dass wir keine Höhen oder Breiten festgelegt haben. das ist ein Teil der Trennung der Struktur von der Haut; Wir haben das Struktur-Styling bereits geschrieben, sodass dieses Objekt den Raum ausfüllt, den die Struktur ihm gibt.

Außerdem haben wir alle beteiligten Elemente unabhängig voneinander gestaltet: Für die übergeordneten Elemente müssen bestimmte untergeordnete Elemente nicht richtig aussehen. Obwohl wir untergeordnete Elemente gestaltet haben, wird nichts kaputt gehen, wenn sie nicht vorhanden sind. Und die untergeordneten Elemente sind größtenteils nicht von ihren Eltern abhängig; Ich habe das h2 in einem Post-Objekt nicht gestylt, da es auf der gesamten Site konsistent sein sollte. Das haben wir bereits in text.css erledigt.

Es gibt noch einen weiteren wichtigen Aspekt, der der objektorientierten Programmierung am ähnlichsten ist: erweiterte Klassen. Sie haben wahrscheinlich gesehen, dass wir sowohl für .post img als auch für .post.ext img ein Styling haben. Ich bin sicher, Sie wissen, was sie tun werden, aber hier ist der Beweis:

postextpostextpostext

Durch einfaches Hinzufügen einer weiteren Klasse zu Ihrem Objekt können Sie kleinere Teile des Erscheinungsbilds ändern. Ich sollte erwähnen, dass Nicole Sullivan eine Klasse namens .postExt erstellt und dann beide auf das Objekt angewendet hätte. Ich mache es lieber so, weil ich damit für alle meine Erweiterungen den gleichen Klassennamen ("ext") verwenden kann und ich denke, dass HTML dadurch sauberer aussieht. Sie müssen nur daran denken, kein Leerzeichen in den Selektor einzufügen. ".post .ext" sucht nach einem Element in class ext innerhalb eines Elements in class post. Ohne Leerzeichen wird in beiden Klassen nach einem Element gesucht.


Weiter zur Seitenleiste

Nachdem wir den Hauptinhaltsbereich festgelegt haben, schauen wir uns die Seitenleiste an. Wir haben zwei Objekte in der Seitenleiste: eine Archivliste und eine Liste der letzten Kommentare. Zunächst erstellen wir eine .side-box-Klasse für sie:

Auch hier sollten Sie beachten, dass wir die beiden Regeln genau befolgen: Wir haben die Struktur von der Haut getrennt, indem wir weder die Höhe noch die Breite festgelegt haben. Das Objekt fließt, um den Platz zu füllen, den es benötigt. Und wir haben den Container vom Inhalt getrennt, indem wir keine untergeordneten Elemente für das richtige Styling erforderlich gemacht haben. Ja, ich habe das h3-Styling angepasst, wodurch das jeweilige h3-Aussehen von der Klassen-Sidebox abhängt. In den meisten Fällen ist das unerwünscht, aber in diesem Fall habe ich nicht zu viel getan.

sidebarsidebarsidebar

Aber lassen Sie uns eine Erweiterung dafür erstellen; Da wir jedoch eine große visuelle Anpassung vornehmen möchten, werden wir die Side-Box-Klasse nicht direkt erweitern. Wir werden eine neue Klasse erstellen.

Was macht das also? Beachten Sie den Selektor: Wir zielen auf jedes Element direkt im Körper unseres Objekts. Beim Stylen eines Objekts wenden Sie die Klasse immer auf das Objekt selbst an. Dieses CSS "knallt" den Inhalt nach rechts.

"Hey, Sie haben eine Breite eingestellt! Was ist mit der Trennung von Naht und Haut?" Ich habe eine Breite festgelegt, weil wir auf die Elemente im Körper unseres Objekts zielen. Da das Objekt gepolstert ist, ist dieses innere Element für sich genommen etwas schmal. Das klingt nach einer Entschuldigung für das Brechen der Regel, aber ich glaube nicht, dass ich wirklich gegen die Regel verstoßen habe: Ich habe die Breite als Prozentsatz festgelegt, was immer noch vom Strukturstil weiter oben in der Kaskade abhängt.

So sieht das aus.

popoutpopoutpopout

Ich habe Ihnen gerade gesagt, dass Sie immer Klassen auf die Objekte der obersten Ebene anwenden und untergeordnete Selektoren verwenden sollten, um die inneren Elemente zu formen. Ein Teil des objektorientierten CSS besteht jedoch darin, Stile einfach mischen und anpassen zu können. Es ist durchaus möglich, dass Sie einen ähnlichen Header für zwei Objekte verwenden möchten, die in keiner Weise wirklich miteinander verwandt sind. Es ist ideal, eine Sammlung von Kopf- und Fußzeilenklassen zu haben, die Sie direkt auf die Kopf- oder Fußzeile eines Objekts anwenden. Auf diese Weise fügen Sie nicht mehreren nicht verwandten Klassen ähnlichen Code hinzu, sondern abstrahieren diesen und wenden ihn an der relevanten Stelle an. Lassen Sie uns einen abstrahierten Header erstellen.

Sie werden feststellen, dass wir dem Header unseres letzten Kommentarobjekts eine Klasse namens "post-it" gegeben haben. Lassen Sie uns diese Klasse jetzt erstellen.

postitpostitpostit

Ein schlechter Anschein einer Haftnotiz!

Es ist wichtig zu betonen, dass wir dies, obwohl wir dies für einen Header verwenden möchten, im Selektor nicht angegeben haben. Wenn dies einem allgemeinen Designaspekt unserer Website ähnelt, möchten wir diesen Stil möglicherweise für etwas anderes. Zum Beispiel könnten wir es um Klassen erweitern, die die Farbe und Drehung anpassen und sie an einer Wand oder einem Bulliten-Brett oder ähnlichem verwenden.

Sperren Sie Ihre Selektoren nicht. Sie wissen nie, wann Sie diese Stile wollen!

Oft möchten Sie noch weiter gehen als nur Kopf- und Fußzeilen. Eine Komponentenbibliothek ist ein großer Teil des objektorientierten CSS. Eine Grundregel könnte folgende sein: Wann immer Sie denselben Stil an mehreren nicht verwandten Stellen anwenden möchten, abstrakt. Natürlich könnten Sie nach dem harten Codieren von etwas in ein Objekt feststellen, dass es nützlicher wäre, wenn Sie es woanders verwenden könnten. Hab keine Angst vor dem Refactor. Es ist immer zu Ihrem Vorteil.

Sie sehen diese Komponenten im Seitenkopf und im Feld "Letzte Kommentare".

Nun, wir sind mit unserer Indexseite fertig. Schauen wir uns etwas objektorientierter auf einer einzelnen Post-Seite an. Kopieren Sie einfach diese Indexseite, benennen Sie sie in "post.htm" um und tauschen Sie den Seitenkopf und den Abschnitt gegen diesen Code aus.

Jetzt können wir sehen, wo eine gewisse Wiederverwendbarkeit ins Spiel kommt. Wir können die Post-Klasse für das Blog-Posting hier verwenden. Das ist die gleiche Post-Klasse, die wir für die Homepage verwendet haben. Da wir die Struktur nicht angegeben haben, sondern das Objekt erweitern lassen, um alles aufzunehmen, was wir ihm geben, kann es den gesamten Beitrag verarbeiten.


Bemerkungen

Wenden wir uns nun den Kommentaren auf dieser Seite zu. Kommentare sind ein großartiger Ort, um objektorientiertes CSS zu verwenden. Wir beginnen mit dem Hinzufügen von:

Dies allein gibt uns einige pseudo-attraktive Kommentare; aber wir können noch mehr tun. Unser HTML enthält Klassen für Antworten und Autorenkommentare.

Stellen Sie sicher, dass zwischen den beiden Klassennamen kein Leerzeichen steht. Dies unterscheidet sich ein wenig von dem, was wir zuvor getan haben: Anstatt das Design der Kommentarklasse zu ändern, erweitern wir sie tatsächlich (vielleicht sind dies also die wirklich erweiterten Klassen).

Und die fertigen Kommentare...

commentscommentscomments

Und während wir hier sind, fügen wir unserer Komponentenbibliothek ein Kommentarformular hinzu.

Dies gibt uns eine schöne Form mit abgerundeten Ecken und einem weichen Schwebeeffekt.

commentsformcommentsformcommentsform

Ich bin hier irgendwie hin und her gerissen; Ein grundlegendes Konzept von objektorientiertem CSS ist die Fähigkeit, verschiedenen Elementen eine Klasse hinzuzufügen. aber was ist mit diesem Fall? Diese Klasse wäre grundsätzlich für alles andere als eine Form nutzlos; sollten wir die Selektoren als eine Art Sicherheit in form.comments-form ändern? Was denken Sie?

Nun, das deckt wirklich die Ideen von objektorientiertem CSS ab.


Überprüfen Sie die Hauptschritte

  1. Bestimmen Sie Ihr Objekt.
  2. Legen Sie Ihre Reset-, Basiselement- und Basisobjektstile fest.
  3. Wenden Sie Klassen auf Objekte und Komponenten an, um das gewünschte Erscheinungsbild zu erzielen.

Ich habe das Beispiel der Standard Nachrichten nicht verwendet, aber es ist wirklich eine großartige Möglichkeit, in objektorientiertes CSS einzusteigen. Erstellen Sie eine Nachrichtenklasse, die Sie auf verschiedene Elemente anwenden können, z.B. einen Absatz, ein Listenelement oder ein vollständiges Objekt. Erweitern Sie es dann mit Fehler-, Warn- und Infoklassen. Sehen Sie, wie flexibel und wiederverwendbar Sie es machen können.


Ist objektorientiertes CSS immer nützlich?

Ich glaube nicht, dass die Antwort auf diese Frage ein einfaches "Ja" oder "Nein" ist. Dies liegt wahrscheinlich daran, dass objektorientiertes CSS keine Sprache ist, sondern eine Sammlung von Mustern und Best Practices. Sie möchten die Idee des Standard-HTML-Objekts nicht immer anwenden, aber die meisten CSS-Prinzipien sind immer gültig. Wenn Sie darüber nachdenken, werden Sie feststellen, dass es wirklich darum geht, wo Sie optimieren möchten: Sie können HTML-Code minimalistisch mit ein paar IDs für Handles codieren und es einfach formatieren. Das CSS kann jedoch nicht wiederverwendet werden, und die Website wird möglicherweise später unterbrochen, wenn Sie Änderungen vornehmen. Oder Sie schreiben etwas mehr HTML und optimieren das CSS mit den Prinzipien, die wir in diesem Tutorial betrachtet haben.

Ich bin bereit, mein HTML ein wenig zu erweitern, damit ich wiederverwendbares, flexibles und trockenes CSS schreiben kann. Was ist Ihre Meinung?


Andere Ressourcen

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.