✔ Logische Benennung Klassen

[eee]

Hallo,

ich möchte ein kleines Profilbild (96x96 Pixel) umrahmen und rechts ausrichen. Unter dem Rahmen soll der Benutzername stehen. Hierzu mein Code:

/*CSS*/
.avatar_div {
	float:right;
	font-size:0.6em;
	text-align:right;
}
img.avatar {
	border:1px solid gray;
	border-radius:8px;
	display: block;
	padding:5px;
}

<!--HTML-->
<div class="avatar_div">
    <img src="avatarname.jpg" alt = "Passender Alt-Text" class="avatar">
    Benutzername
</div>

Stimmt mein Code soweit? Was macht es denn für einen Unterschied, ob ich ".avatar" oder "img.avatar" verwende? Wie würdet ihr die beiden Klassen benennen?

Danke und viele Grüße, eee!

 

[CPoly]

Was macht es denn für einen Unterschied, ob ich ".avatar" oder "img.avatar" verwende?

Naja, bei ersterem werden alle Elemente ausgewählt, die "avatar" als Klasse haben und beim zweiten nur alle img Element mit dieser Klassen.

Wie würdet ihr die beiden Klassen benennen?

Ich würde es so machen:

.avatar {
	float:right;
	font-size:0.6em;
	text-align:right;
}

.avatar > img {
	border:1px solid gray;
	border-radius:8px;
	display: block;
	padding:5px;
}

<div class="avatar">
    <img src="avatarname.jpg" alt = "Passender Alt-Text">
    Benutzername
</div>

1. Es ist semantisch
2. Du sparst eine Klasse

 

[eee]

Vielen Dank, sieht sehr übersichtlich aus und macht genau was es soll. Noch eine Frage: Angenommen ich möchte auf einer Seite das Profilbild nur umrahmen (ohne Beschriftung, ohne Ausrichtung), wie kann ich auf die Formatierung von ".avatar > img" zugreifen? <img src="bild.jpg" class="avatar"> funktioniert leider nicht.

 

[CPoly]

Dann würde ich das so erweitern

.avatar {
    float:right;
    font-size:0.6em;
    text-align:right;
}
 
.avatar > img, avatar_img {
    border:1px solid gray;
    border-radius:8px;
    display: block;
    padding:5px;
}

Jetzt kannst du entweder dieses bisherige Markup benutzen

<div class="avatar">
    <img src="avatarname.jpg" alt = "Passender Alt-Text">
    Benutzername
</div>

oder auch nur das

<img src="avatarname.jpg" alt = "Passender Alt-Text" class="avatar_img">

Jetzt hast du leider wieder zwei Klassen im Spiel. Aber das ist besser als ".avatar" für zwei verschiedene Zwecke zu benutzen.

 

[eee]

Ausgezeichnet, vielen Dank für die Info! Jetzt bin ich wieder etwas klüger