CSS Naming Conventions...

[Tschoartsch]

Hallo,

bin soeben auf ein CSS-Verhalten gestoßen, das mir nicht richtig schlüssig erscheint (aber funktioniert)

...wenn ich eine Klasse 2x definiere, so überschreibt die nachgereihte Klasse die ihr vorangehende.

So ergibt

.Farbe {
	color: red;
}
.Farbe {
	color: green;
}

im Endeffekt grün - die Klasse Farbe wird überschrieben.

Klassen und Animationsnamen dürften allerdings keinen Namenskonflikt erzeugen.

.Animation { /* "Animation" hier als Klassenname */
	animation-name: Animation; /* "Animation" hier als Animationsname */
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes Animation {
	/* [...] */
}

scheint einwandfrei zu funktionieren... ...ist das tatsächlich bedenkenlos möglich oder übersehe ich was?

Danke für eure Tipps!

[Matthias Scharwies]

Servus!

Hallo,

bin soeben auf ein CSS-Verhalten gestoßen, das mir nicht richtig schlüssig erscheint (aber funktioniert)

...wenn ich eine Klasse 2x definiere, so überschreibt die nachgereihte Klasse die ihr vorangehende.

So ergibt

.Farbe {
	color: red;
}
.Farbe {
	color: green;
}

Eine Klasse ist eine Klasse.

im Endeffekt grün - die Klasse Farbe wird überschrieben.

Klassen und Animationsnamen dürften allerdings keinen Namenskonflikt erzeugen.

.Animation { /* "Animation" hier als Klassenname */
	animation-name: Animation; /* "Animation" hier als Animationsname */
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes Animation {
	/* [...] */
}

scheint einwandfrei zu funktionieren... ...ist das tatsächlich bedenkenlos möglich oder übersehe ich was?

Du hast eine Klasse.

Ein Absatz könnte ja auch die Klasse p haben: <p class="p">

Hier hat die Animation einen Namen. Der fängt mit einem Buchstaben an und heißt nicht wie ein Schlüsselwort: ease, linear, infinite, alternate, running, paused, usw.

Geht doch!

Danke für eure Tipps!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

hätt ich ja nie gedacht, Dir mal ein Minus zu geben - aber was Du da geschrieben hast, liest sich für mich wie zusammenhangloses und wirres Zeug, das dem OP keinen Millimeter bei seinem grundsätzlichen Problem helfen kann. Kennst Du den OP und das, was Du schreibst, ist nur im Kontext einer privaten Konversation mit ihm verständlich?

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

hätt ich ja nie gedacht, Dir mal ein Minus zu geben - aber was Du da geschrieben hast, liest sich für mich wie zusammenhangloses und wirres Zeug, das dem OP keinen Millimeter bei seinem grundsätzlichen Problem helfen kann. Kennst Du den OP und das, was Du schreibst, ist nur im Kontext einer privaten Konversation mit ihm verständlich?

Nein.

zugegeben, deine Erklärung ist besser!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Tschoartsch,

nein, das hast Du falsch verstanden.

.Farbe {
   color: red;
}

definiert nicht die Klasse Farbe. Klassen werden genau genommen nirgends definiert. Wenn ein Klassenname verwendet wird, ist er da. Einfach so.

Du kannst

• HTML Elementen eine Klasse zuordnen, im HTML mittels des class Attributs, oder in JavaScript durch Zuweisung an die className Eigenschaft oder durch Verwendung der classList.add Methode.
• CSS Regeln schreiben, die im Selektor eine Klasse verwenden.

Lektüre im Self-Wiki: Selektoren und Spezifität, aber lies erstmal hier weiter.

Letzteres hast Du getan: du hast eine Regel geschrieben, die einen Klassen-Selektor für die Klasse "Farbe" enthält. Diese Regel setzt für die Elemente, auf die der Selektor zutrifft, die color Eigenschaft auf "red".

Dann hast Du noch eine Regel geschrieben, mit dem gleichen Selektor, die der color-Eigenschaft den Wert "green" zuweist. Weil die beiden Selektoren die gleiche Spezifität haben, gewinnt die Regel, die als letztes kommt.

Und die dritte Regel hat einen Selektor, der alle Elemente mit der Klasse "Animation" trifft. Der Keyframe-Name "Animation" ist davon aber unabhängig. Klassen und Keyframes sind unterschiedliche Namensräume. So wie Zeitschriften und Autos (Focus).

Rolf

[Tschoartsch]

WOW, dank dir vielmals für die ausführlichen Worte wie Lektürevorschläge!

...nur um das richtig zu verstehen, das heißt also dass

/* BSP A */

.Animation { /* "Animation" hier als Selektor */
	animation-name: Animation; /* "Animation" hier als Eigenschaft */
	/* [...] */
}
@keyframes Animation {
	/* [...] */
}

im Prinzip dasselbe ist wie

/* BSP B */

.Animation {
	/* [...] */
}
#Animation {
	/* [...] */
}

(Mit natürlich dem Unterschied, dass es sich bei BSP A um einen Selektor und eine Eigenschaft handelt, während BSP B zwei verschiedene Selektortypen darstellt.)

?

[Tschoartsch]

<NACHTRAG>

Sorry, das war wahrscheinlich etwas missverständlich. Mit im Prinzip dasselbe meinte ich, dass es sich in beiden Fällen um unterschiedliche Namensräume handelt ...?

</NACHTRAG>

[Rolf B]

Hallo Tschoartsch,

nein, da hast Du jetzt einen dritten Aspekt hereingebracht.

".Animation" findet alle HTML Elemente mit class="Animation".

"#Animation" findet das HTML Element mit id="Animation". Die id soll eindeutig im Dokument sein, darum "das Element", nicht "die Elemente".

Zum Nachtrag: Ja, ok. IDs und Klassen sind getrennte Namensräume. Keyframes sind aber nochmal separat.

Keyframes sind ein reines CSS Konstrukt ohne Entsprechung im HTML, und auf den Namen einer @keyframes Definition kannst Du nur mit der CSS Eigenschaft animation-name Bezug nehmen. Dadurch legst Du fest, was in der Animation passieren soll.

.Animation { /* "Animation" hier als Selektor */
	animation-name: Animation; /* "Animation" hier als Eigenschaft */

Animation hier als Selektor: Jein. Der Punkt gehört zum Selektor, der Selektor ist alles, was vor dem { steht. Animation ist ein Klassenname in einem Klassenselektor.

Animation hier als Eigenschaft: Nein. Es ist der Name einer @keyframes Definition, keine Eigenschaft. Die Eigenschaft heißt animation-name.

Rolf