Willkommen bei Schnipsel, Code Schnipsel zu Wordpress, PHP, HTML, CSS, jQuery und so weiter...

CSS – mit wenig Klassen auskommen

07.2009 / von: David Hellmann / 2 Kommentare / Kategorie: CSS / Tags:

Wenn man sein CSS gut schreibt dann kann man sich viele klasse sparen. Wenn man zum Beispiel verschiende Absätze- oder Headlineformatierungen haben möchte kann man über das Elternelement leicht auf das Kind zugreifen und muss dafür nicht extra eine Klasse vergeben. Folgendes Beispiel soll das zeigen.

Wir haben folgendes HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="content">
	<!-- Sticky Post -->
	<div class="stickypost">
		<h2>Headline for sticky Post here</h2>
		<p>
			Content here
		</p>
	</div>
 
	<!-- Normal Post -->
	<div class="post">
		<h2>Headline for normal Post here</h2>
		<p>
			Content here
		</p>
	</div>
</div>

Dazu folgendes CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#content .stickypost, #content .post {
	width:500px;
	border-bottom:1px dotted #aaa;
	float:left;
	clear:both	;
	etc...	
}
 
.stickypost h2, .post h2 {
	font:bold 18px/23px Arial;
	color:#666;
	etc...
}
 
.stickypost h2 {
	color:#d40000;
	etc...
}
 
.stickypost p, .post p {
	font:normal 13px/18px Arial;
	color:#444;
	margin:10px 0;
	etc...
}
 
.stickypost p {	
	font:normal 15px/20px Arial;
	etc...
}

Ergebnis

Man hat ohne irgendwelche Klassen zu vergeben trotzdem genug Einfluss auf die Elemente.

Statistik: gelesen: 1701 / heute: 2 / zuletzt: 08.09.2010
Simple PHP Schleife // AS3 eigene Events

  1. 2 Kommetare • Eintrag schreiben

  2. Frank →
    #1 Permalink Am 8. Juli 2009 um 10:13 Uhr

    Ich dachte immer, dass ist selbstverständlich für engagierte Webworker – weniger ist mehr, das gilt für Markup und CSS-

  3. David Hellmann →
    #2 Permalink Am 8. Juli 2009 um 10:54 Uhr

    Aber ob es jeder macht ist die Frage :)
    Ich hab mich auch schon bei Klassensalat erwischt :D

Kommentar schreiben

Code einfügen: <pre lang="php" line="1"> Code hier </pre>