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?
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.
<div class="object">
<div class="head"></div>
<div class="body"></div>
<div class="foot"></div>
</div> Bevor Sie "DIVITIS!" erkennen, dass dies nicht so schlimm ist, wie es aussieht; bedenken Sie:
<article>
<header></header>
<section></section>
<footer></footer>
</article> 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Object Oriented CSS</title>
<!--[if IE]><script src="http://nettuts.s3.amazonaws.com/450_ooCss/http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- This makes IE recognize and use the HTML5 elements -->
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/text.css" />
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
<article id="container">
<header>
<h1>Object Oriented CSS</h1>
<h2 class="subtitle">(really just a bunch of best practices and patterns; not a new language)</h2>
<nav>
<ul>
<li><a href="index.htm" class="selected">Home</a></li>
<li><a href="=post.htm">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<article class="post">
<header>
<span class="date">September 10, 2009</span>
<h2><a href="post.htm">Check out WorkAwesome!</a></h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
<article class="post ext">
<header>
<span class="date">September 7, 2009</span>
<h2>The Intro Post</h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
<article class="post">
<header>
<span class="date">September 5, 2009</span>
<h2>Welcome</h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
</section>
<aside>
<article class="side-box">
<header>
<h2>Archives</h2>
<p>look into the past</p>
</header>
<section>
<ul>
<li><a href="#">August 2009</a></li>
<li><a href="#">July 2009</a></li>
<li><a href="#">June 2009</a></li>
<li><a href="#">May 2009</a></li>
<li><a href="#"> . . . </a></li>
</ul>
</section>
</article>
<article class="pop-out side-box">
<header class="post-it">
<h2>Recent Comments</h2>
<p>see what folks are saying</p>
</header>
<section>
<ul>
<li>
<p>I think oocss is really cool!</p>
<p class="meta">By J. Garret on Sept 12, about "The Intro Post"</p>
</li>
<li>
<p>Are you kidding? CSS can't ever be Object Oriented.</p>
<p class="meta">By Joe Thomas on Sept 11, about "The Intro Post"</p>
</li>
<li>
<p>Envato has done it again; workAwesome is simply awesome!</p>
<p class="meta">By GV on Sept 10, about "Check out WorkAwesome"</p>
</li>
<li>
<p>I really like the site's desing; another work of art from Collis.</p>
<p class="meta">By Anonymous on Sept 10, about "Check out WorkAwesome"</p>
</li>
</ul>
</section>
</article>
</aside>
<footer>
<ul>
<li>Standard</li>
<li>Footer</li>
<li>Information</li>
<li>Yada</li>
<li>Yada</li>
<li>© 2009</li>
</ul>
</footer>
</article>
</body>
</html> Ich weiß, dass es ziemlich lang ist, deshalb hier ein Diagramm unserer Grundstruktur:
Ä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:
body { font: 13px/1.6 Helvetica, Arial, FreeSans, sans-serif;}
h1, h2, h3, h4, h5, h6 { color:#333; }
h1 { font-size: 50px; text-shadow:1px 1px 0 #fff; font-family:arial black, arial}
h2 { font-size: 23px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }
p, h1, h2, h3, h4, h5, h6, ul { margin-bottom: 20px; }
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } (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.
body
{ background:url(../img/grad.jpg) repeat-x #c0c0c0;
}
/*Note: All the image will be in the downloadable source code. */
a
{ text-decoration:none;
color:#474747;
padding:1px;
}
a:hover
{ background:#db5500;
color:#fff;
}
.selected
{ border-bottom:1px solid #db5500;
}
li
{ padding-left:15px;
background:url(../img/bullet.png) 0 5.9px no-repeat;
} Unsere erste Aufgabe besteht darin, die Struktur der Seite zu definieren:
#container
{ margin:40px auto;
width:960px;
border:1px solid #ccc;
background:#ececec;
}
#container > header, #container > footer
{ padding:80px 80px 80px;
width:800px;
overflow:hidden;
border: 1px solid #ccc;
border-width:1px 0 1px 0;
}
#container > header
{ background:url(../img/header.jpg) repeat-x #d9d9d7;
}
#container > header li, #container > footer li
{ float:left;
padding:0 5px 0 0;
background:none;
}
#container > section
{ background:#fdfdfd;
padding:0 40px 40px 80px;
float:left;
width:493px;
border-right:1px solid #ccc;
}
#container > aside
{ padding-top:20px;
float:left;
width:346px;
}
#container > footer
{ padding:40px 80px 80px;
background:#fcfcfc;
}
#container > footer li:after
{ content:" |"
}
#container > footer li:last-child:after
{ content:""
} 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:
.post
{ overflow:visible;
margin-top:40px;
}
.post > header
{ margin:0 0 20px 0;
position:relative;
}
.post .date
{ padding:2px 4px ;
background:#474747;
color:#ececec;
font-weight:bold;
transform:rotate(270deg);
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
position:absolute;
top:60px;
left:-105.5px;
}
.post img
{ float:left;
margin-right:10px;
}
.post.ext img
{ float:right;
margin:0 0 0 10px;
}
.post footer
{ overflow:hidden;
}
.post footer li
{ float:left;
background:none;
} 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:
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:
.side-box
{ padding: 20px 80px 20px 40px;
}
.side-box:not(:last-child)
{ border-bottom:1px solid #ccc;
}
.side-box > header h3
{ margin-bottom:0;
}
.side-box > header p
{ text-transform:uppercase;
font-style:italic;
font-size:90%;
} 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.
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.
.pop-out > section > *
{ display:block;
background:#fefefe;
border:1px solid #474747;
padding:20px;
position:relative;
width: 120%;
left:20px;
} 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.
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.
.post-it
{ border:1px solid #db5500;
padding: 10px;
font-style:italic;
position:relative;
background:#f2965c;
color:#333;
transform:rotate(356deg);
-moz-transform:rotate(356deg);
-webkit-transform:rotate(356deg);
z-index:10;
top:10px;
box-shadow:1px 1px 0px #333;
-moz-box-shadow:1px 1px 0px #333;
-webkit-box-shadow:1px 1px 0px #333;
} 
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".
.meta
{ font-size:75%;
font-style:italic;
}
.subtitle
{ text-transform:uppercase;
font-size:90%;
font-weight:bold;
letter-spacing:1px;
text-shadow:1px 1px 0 #fff;
} 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.
<header>
<h1>Object Oriented CSS</h1>
<p class="subtitle">(really just a bunch of best practices and patterns; not a new language)</p>
<nav>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="#" class="selected">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<article class="post">
<header>
<span class="date">September 10, 2009</span>
<h2>Check out WorkAwesome!</h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Digg!</a></li>
<li><a href="#">Share!</a></li>
<li><a href="#">Like!</a></li>
</ul>
</footer>
</article>
<article class="comments">
<header><h2>Comments</h2></header>
<section>
<article class="comment">
<header><p>First-commenter</p><p class="meta">Sept 10</p></header>
<section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,</p></section>
</article>
<article class="reply comment">
<header><p>Reply-commenter</p><p class="meta">Sept 12</p></header>
<section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
</article>
<article class="comment">
<header><p>Second-commenter</p><p class="meta">Sept 10</p></header>
<section><p>tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus </p></section>
</article>
<article class="author comment">
<header><p>The author</p><p class="meta">Sept 11</p></header>
<section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
</article>
<article class="comment">
<header><p>Fourth-commenter</p><p class="meta">Sept 12</p></header>
<section><p>imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi</p></section>
</article>
</section> 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:
.comment
{ border:1px solid #ccc;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding:10px;
margin:0 0 10px 0;
}
.comment > header > p
{ font-weight:bold;
display:inline;
margin:0 10px 20px 0;
} 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.
.reply.comment
{ margin-left:80px;
}
.author.comment
{ color:#ececec;
background:#474747;
} 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...
Und während wir hier sind, fügen wir unserer Komponentenbibliothek ein Kommentarformular hinzu.
.comments-form p
{ padding:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.comments-form p:hover
{ background:#ececec;
}
.comments-form label
{ display:inline-block;
width:70px;
vertical-align:top; }
.comments-form label:after
{ content: " : ";
}
.comments-form input[type=text],
.comments-form button,
.comments-form textarea
{ width:200px;
border:1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:2px;
}
.comments-form button[type=submit]
{ margin-left:70px;
} Dies gibt uns eine schöne Form mit abgerundeten Ecken und einem weichen Schwebeeffekt.
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
- Bestimmen Sie Ihr Objekt.
- Legen Sie Ihre Reset-, Basiselement- und Basisobjektstile fest.
- 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
