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

CSS – mit wenig Klassen auskommen

07.2009 / von: David Hellmann / 4 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: read: 3269 / today: 4 / last: 06.02.2012
//

  1. 4 Kommetare • Eintrag schreiben

  2. Frank →
    #1 Permalink Am 8. July 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. July 2009 um 10:54 Uhr

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

  4. nightmare →
    #3 Permalink Am 21. November 2010 um 13:30 Uhr

    Nicht direkt ein Kommentar zu dem Post,
    aber wie fügst du denn den Code in der Art und Weise und so schön farbig ein?

    Gibts da ein Skript oder Plugin, das den automatisch so formatiert?

  5. David Hellmann →
    #4 Permalink Am 8. March 2011 um 01:03 Uhr

    Ja das ist ein WordPress Plugin und das findest du hier: http://wordpress.org/extend/plugins/wp-syntax/

Kommentar schreiben

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