CSS Naming Conventions... – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self CSS Naming Conventions... Sat, 14 Nov 20 18:55:22 Z https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777987#m1777987 https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777987#m1777987 <p>Hallo,</p> <p>bin soeben auf ein CSS-Verhalten gestoßen, das mir nicht richtig schlüssig erscheint (aber funktioniert)</p> <p>...wenn ich eine Klasse 2x definiere, so überschreibt die nachgereihte Klasse die ihr vorangehende.</p> <p>So ergibt</p> <pre><code class="block language-css"><span class="token selector">.Farbe</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Farbe</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>im Endeffekt grün - die Klasse <code>Farbe</code> wird überschrieben.</p> <p>Klassen und Animationsnamen dürften allerdings keinen Namenskonflikt erzeugen.</p> <pre><code class="block language-css"><span class="token selector">.Animation</span> <span class="token punctuation">{</span> <span class="token comment">/* "Animation" hier als Klassenname */</span> <span class="token property">animation-name</span><span class="token punctuation">:</span> Animation<span class="token punctuation">;</span> <span class="token comment">/* "Animation" hier als Animationsname */</span> <span class="token property">animation-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span> <span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> forwards<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> Animation</span> <span class="token punctuation">{</span> <span class="token comment">/* [...] */</span> <span class="token punctuation">}</span> </code></pre> <p>scheint einwandfrei zu funktionieren... ...ist das tatsächlich bedenkenlos möglich oder übersehe ich was?</p> <p>Danke für eure Tipps!</p> CSS Naming Conventions... Sat, 14 Nov 20 19:05:24 Z https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777988#m1777988 https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777988#m1777988 <p>Servus!</p> <blockquote> <p>Hallo,</p> <p>bin soeben auf ein CSS-Verhalten gestoßen, das mir nicht richtig schlüssig erscheint (aber funktioniert)</p> <p>...wenn ich eine Klasse 2x definiere, so überschreibt die nachgereihte Klasse die ihr vorangehende.</p> <p>So ergibt</p> <pre><code class="block language-css"><span class="token selector">.Farbe</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Farbe</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Eine Klasse ist eine Klasse.</p> <blockquote> <p>im Endeffekt grün - die Klasse <code>Farbe</code> wird überschrieben.</p> <p>Klassen und Animationsnamen dürften allerdings keinen Namenskonflikt erzeugen.</p> <pre><code class="block language-css"><span class="token selector">.Animation</span> <span class="token punctuation">{</span> <span class="token comment">/* "Animation" hier als Klassenname */</span> <span class="token property">animation-name</span><span class="token punctuation">:</span> Animation<span class="token punctuation">;</span> <span class="token comment">/* "Animation" hier als Animationsname */</span> <span class="token property">animation-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span> <span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> forwards<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> Animation</span> <span class="token punctuation">{</span> <span class="token comment">/* [...] */</span> <span class="token punctuation">}</span> </code></pre> <p>scheint einwandfrei zu funktionieren... ...ist das tatsächlich bedenkenlos möglich oder übersehe ich was?</p> </blockquote> <p>Du hast eine Klasse.</p> <p>Ein Absatz könnte ja auch die Klasse p haben: <code><p class="p"></code></p> <p>Hier hat die <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation/Animation#animation-name" rel="nofollow noopener noreferrer">Animation einen Namen</a>. Der fängt mit einem Buchstaben an und heißt nicht wie ein Schlüsselwort: ease, linear, infinite, alternate, running, paused, usw.</p> <p>Geht doch!</p> <blockquote> <p>Danke für eure Tipps!</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> CSS Naming Conventions... Sat, 14 Nov 20 19:06:29 Z https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777989#m1777989 https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777989#m1777989 <p>Hallo Tschoartsch,</p> <p>nein, das hast Du falsch verstanden.</p> <pre><code class="block language-css"><span class="token selector">.Farbe</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>definiert <strong>nicht</strong> die Klasse Farbe. Klassen werden genau genommen nirgends definiert. Wenn ein Klassenname verwendet wird, ist er da. Einfach so.</p> <p>Du kannst</p> <ul> <li>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.</li> <li>CSS Regeln schreiben, die im Selektor eine Klasse verwenden.</li> </ul> <p>Lektüre im Self-Wiki: <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren" rel="nofollow noopener noreferrer">Selektoren</a> und <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade" rel="nofollow noopener noreferrer">Spezifität</a>, aber lies erstmal hier weiter.</p> <p>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".</p> <p>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.</p> <p>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).</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> CSS Naming Conventions... Sat, 14 Nov 20 19:09:58 Z https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777990#m1777990 https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777990#m1777990 <p>Hallo Matthias,</p> <p>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?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> CSS Naming Conventions... Sat, 14 Nov 20 19:39:05 Z https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777992#m1777992 https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777992#m1777992 <p>WOW, dank dir vielmals für die ausführlichen Worte wie Lektürevorschläge!</p> <p>...nur um das richtig zu verstehen, das heißt also dass</p> <pre><code class="block language-css"><span class="token comment">/* BSP A */</span> <span class="token selector">.Animation</span> <span class="token punctuation">{</span> <span class="token comment">/* "Animation" hier als Selektor */</span> <span class="token property">animation-name</span><span class="token punctuation">:</span> Animation<span class="token punctuation">;</span> <span class="token comment">/* "Animation" hier als Eigenschaft */</span> <span class="token comment">/* [...] */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@keyframes</span> Animation</span> <span class="token punctuation">{</span> <span class="token comment">/* [...] */</span> <span class="token punctuation">}</span> </code></pre> <p>im Prinzip dasselbe ist wie</p> <pre><code class="block language-css"><span class="token comment">/* BSP B */</span> <span class="token selector">.Animation</span> <span class="token punctuation">{</span> <span class="token comment">/* [...] */</span> <span class="token punctuation">}</span> <span class="token selector">#Animation</span> <span class="token punctuation">{</span> <span class="token comment">/* [...] */</span> <span class="token punctuation">}</span> </code></pre> <p>(Mit natürlich dem Unterschied, dass es sich bei <code>BSP A</code> um einen Selektor und eine Eigenschaft handelt, während <code>BSP B</code> zwei verschiedene Selektortypen darstellt.)</p> <p>?</p> CSS Naming Conventions... Sat, 14 Nov 20 19:21:52 Z https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777991#m1777991 https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777991#m1777991 <p>Servus!</p> <blockquote> <p>Hallo Matthias,</p> <p>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?</p> </blockquote> <p>Nein.</p> <p>zugegeben, deine Erklärung ist besser!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> CSS Naming Conventions... Sat, 14 Nov 20 19:41:43 Z https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777993#m1777993 https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777993#m1777993 <p><NACHTRAG></p> <p>Sorry, das war wahrscheinlich etwas missverständlich. Mit <em>im Prinzip dasselbe</em> meinte ich, dass es sich in beiden Fällen um unterschiedliche Namensräume handelt ...?</p> <p></NACHTRAG></p> CSS Naming Conventions... Sat, 14 Nov 20 19:59:05 Z https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777994#m1777994 https://forum.selfhtml.org/self/2020/nov/14/css-naming-conventions/1777994#m1777994 <p>Hallo Tschoartsch,</p> <p>nein, da hast Du jetzt einen dritten Aspekt hereingebracht.</p> <p>".Animation" findet alle HTML Elemente mit class="Animation".</p> <p>"#Animation" findet das HTML Element mit id="Animation". Die id soll eindeutig im Dokument sein, darum "das Element", nicht "die Elemente".</p> <p>Zum Nachtrag: Ja, ok. IDs und Klassen sind getrennte Namensräume. Keyframes sind aber nochmal separat.</p> <p>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.</p> <pre><code class="block language-css"><span class="token selector">.Animation</span> <span class="token punctuation">{</span> <span class="token comment">/* "Animation" hier als Selektor */</span> <span class="token property">animation-name</span><span class="token punctuation">:</span> Animation<span class="token punctuation">;</span> <span class="token comment">/* "Animation" hier als Eigenschaft */</span> </code></pre> <p>Animation hier als Selektor: Jein. Der Punkt gehört zum Selektor, der Selektor ist <strong>alles</strong>, was vor dem { steht. Animation ist ein Klassenname in einem Klassenselektor.</p> <p>Animation hier als Eigenschaft: Nein. Es ist der Name einer @keyframes Definition, keine Eigenschaft. Die Eigenschaft heißt animation-name.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>