Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

ID vs. Class – Verwende niemals ID’s als CSS-Selektor

CSS Selektor. ID vs. Class

CSS-Selektor ID (#element)

ID’s sind performance-technisch der beste weil schnellste CSS-Selektor, allerdings bringt die Verwendung von IDs als Selektor jede Menge Nachteile mit sich, vor allem bei Veerbungen von Klassen. Und gerade die Vereerbung innerhalb von Stylesheets ist eine der mächtigsten und wichtigsten Werkzeuge, diese sollte man aber immer berücksichtigen bzw. ermöglichen, gerade in größeren Projekten. Und deshalb sage ich seit einiger Zeit:

Verwende niemals ID’s als CSS-Selektor!

Wieso? Hier ein kleines Beispiel:

Markup


CSS

#footer p{
 color: #000;
}
 
p.error{
 color: #F00;
}

In diesem Beispiel ist der ausgegebene Text beim untenstehenden Markup in p.error schwarz, der ID-Selektor hat also Vorrang und wirkt ähnlich einem !important. Man müsste den ID-Selektor an dieser Stelle also entweder mit #footer p.error{color: #F00;} oder mit p.error{color: #F00 !important;} überschreiben. Bei der Verwendung von IDs erzeugen wir also unsauberen, unübersichtlichen und vor allem unnötigen Code, der nicht vererbbar ist. Das ist gerade bei größeren Projekten sehr problematisch.

Anstelle von IDs kann man hier auch mit einer einfachen Klasse, beispielsweise .main-footer, das gewünschte Ergebnis erzielen ohne Styles mehrfach im Nachhinein überschreiben zu müssen. Desweiteren kann man diese Elemente bei Bedarf nun auch mehrfach auf der Seite verwenden, was bei ID’s ja ohnehin ausgeschlossen ist.

Markup


Mit dem oben aufgeführten CSS hat man nun auch das gewünschte Verhalten.

IDs eignen sich hingegen sehr gut als Selektor für JavaScript Funktionen, und sind natürlich weiterhin als Sprungmarkenziel innerhalb von HTML-Seiten geeignet.

Add Comment

* Required information
1000
Powered by Commentics

Comments (0)

No comments yet. Be the first!