Class oder Id?

class benutzt du (oder ich für meinen teil^^) für eine klasse, also quasi als oberbegriff. mit class definierst du für gewöhnlich die werte, welche fürs positioning zuständig sind.

die id bezieht sich eher auf ein spezielles objekt, so kann zum beispiel eine box der klasse .box eine id als #specialbox erhalten. mit der id legst du das aussehen eines elementes fest.

ich hoffe ich konnte das einigermaßen anschaulich ausdrücken.

also ich verwende das ganze so:

<div id="nav">
   <div class="box">box1</div>
   <div class="box">box2</div>
   <div class="box">box3</div>
</div>

ID anders als Class ist als "Unique Identifier" bekannt soll heißen dieses Element gibt es auf dieser Seite nur einmal.

Persönlich nutze ich ID so gut wie nie. Mit Klassen bist du freier und kannst die selben Stile vergeben.

Sollte ich ID's nutzen, nutze ich sie im Rahmen von JavaScript, als Button o.ä. um mir sicher zu sein nur diesen Button anzusprechen und nicht alle mit z.B. der Klasse "Button".

Persönliche Empfehlung: Nutze Class und nicht ID außer du möchtest nur ein Element auf der Seite ansprechen. z.B. den Header oder einen Button.

Zitat von MDN

Das id globale Attribut definiert einen eindeutigen Bezeichner (ID) welcher eindeutig im gesamten Dokument sein muss. Das Ziel ist die Identifizierung eines Elementes in Verknüpfungen (durch einen Fragmentbezeichner), Skripting, oder Stylisierung (mit CSS).

Zitat von teacher

mit class definierst du für gewöhnlich die werte, welche fürs positioning zuständig sind.

Woher hast du das denn? Kenn ich so garnicht.

Zitat von teacher

mit der id legst du das aussehen eines elementes fest.

Kannst du mit beiden Sachen, ID sowie mit Class.

Zitat von Cqeal

Woher hast du das denn? Kenn ich so garnicht.

Kannst du mit beiden Sachen, ID sowie mit Class.

klar kannst du^^
aber schauen wir uns mal ein beispiel an:
du hast eine box .box welche du auf deiner seite mehrmals verwendest. diese box soll je nach verwendung anders aussehen, alles sollen aber gleich groß sein und sich gleich positionieren. da du in der klasse die größe sowie position definiert hast, kannst du die gleiche box mehrmals verwenden, jedoch mit verschiedenen id's welche für das aussehen zuständig sind.
natürlich muss man das nicht tun, es macht aber extrem viel sinn, vorallem bei größeren anwendungen.

Zitat von teacher

natürlich muss man das nicht tun, es macht aber extrem viel sinn, vorallem bei größeren anwendungen.

Naja, mal angenommen ich baue eine Webseite mit Komponenten, mein Kunde kann diese Komponenten verwenden wie er möchte.
Ich habe 3 Boxen: News, Ticker und Changelog oder so. Jetzt möchte der Kunde aber zwei News auf einer Seite haben, was machst du dann?
Dann wäre deine Seite nicht mehr W3C konform. Löst keinen Fehler aus, das ist klar.

Ich nutze prinzipell Naming Conventions von SuitCSS.

Meine Box hat eine Klasse ".box" nun baue ich die NewsBox.
Meine Newsbox bekommt die Klasse "box" und die Klasse "box--news" somit kann ich mehere News auf einer Seite erstellen.
Bei deinem Bespiel müsste ich für jede News eine neue Klasse anlegen.

Ich weiß dass du darauf hinaus willst wenn man diese Box nur einmal verwendet, kommt aber eher selten vor. In privaten Projekten evtl, aber selbst wenn du dann doch ne zweite Box auf der Seite haben willst musst du dein HTML sowie CSS unnötig verändern.

Ich benutze eine class sobald ich mir die Option offen lassen will mehrere Sachen zu nutzen

class="right-box moveleft"

class="right-box moveright"

somit könnte ich dann, als Beispiel -> sprich sinnloser Code.

.right-box {

float: left;

width: 200px;

height: 200px;

background-color: #FF0000;

}

.moveleft {

margin-left: 20px;

}

.moveright {

margin-left: 40px;

}

dann brauche ich nämlich keine class und id nehmen

sprich

<div class="right-box" id="moveleft"></div>

<div class="right-box" id="moveright"></div>

zu mal das Beispiel teils aus meinem letzten Code übernommen wurde, wo durch eine Javascript/jQuery anwendung eine class durch .addClass();

hinzugefügt wurde.

solltest du dir sicher sein, dass du eine Sache nur 1x mal angibst, so kannst du auch mit einer ID arbeiten.

Macht vom Grund aber keinen Unterschied ob du mit einer class oder einer ID arbeitest.

Wie ich schon mal sagte, die CSS ändert sich nicht

Wie oben aber schon genannt wurde -> ID's sind gut bei Sachen wie Buttons

Und in ein paar Javascript Sachen.

Es gibt nun noch ein Beispiel, sprich willst du einer div einen margin-right zu teilen, so lohnt es sich nicht

<div class="right-box right"></div>

<div class="right-box right"></div>
<div class="right-box right"></div>
<div class="right-box right"></div>

zu machen, sondern mit :nth-child zu arbeiten, so sieht dein Code weitaus schöner aus

https://www.w3schools.com/cssref/sel_nth-child.asp falls es dich interessiert.

Zitat von Cqeal

Bei deinem Bespiel müsste ich für jede News eine neue Klasse anlegen.

nur wenn du absolut positionierst.

vielleicht war mein beispiel schlecht gewählt aber es bezieht sich darauf, dass die gleiche klasse mehrmals benutzte werden soll.

Zitat von teacher

nur wenn du absolut positionierst.

vielleicht war mein beispiel schlecht gewählt aber es bezieht sich darauf, dass die gleiche klasse mehrmals benutzte werden soll.

Nein, eine ID ist eindeutig. Sie darf nach Standards nur einmal auf jeder Seite als Element existieren. Wenn du es anders machst ist das SEO mäßig kompletter Rotz.

Ich benutze IDs wenn ich mit JS ein bestimmtes Element "bearbeiten" will.

Ansonsten HTML5 Tags oder class.

zB. für eine navigation benutze ich <nav>...</nav> macht für mich mehr Sinn als <div class="nav">...</div>.

Zitat von Higoka

Ich benutze IDs wenn ich mit JS ein bestimmtes Element "bearbeiten" will.

Ansonsten HTML5 Tags oder class.

zB. für eine navigation benutze ich <nav>...</nav> macht für mich mehr Sinn als <div class="nav">...</div>.

Als alternative kann man "data-" Attribute nutzen.

Zitat von kanax

Als alternative kann man "data-" Attribute nutzen.

Nice, ein einfaches ".box" wird zu "[data-box]".
Man kann auch mehrere ID's nutzen, dem Browser ist das alles egal, der fixxt sogar dein Kaputtes HTML so gut wie er kann.
Ich wollte zeigen was einfach Best Practice ist und das sind Klassen, wenig ID's nur wenn wirklich Notwendig.

Zitat von MDN

data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM

Zumal "data-" Attribute garnicht dazu gedacht sind als Selektor zu agieren. Möglich ist alles.
Aber warum ich als "Alternative" zu HTML5-Tags HTML5-Attribute nutzen sollte ist mir nicht schlüssig.
Gibt es da einen Vorteil, seh ich etwas nicht? Wenn ja klär mich gern auf.

Zitat von Cqeal

Nice, ein einfaches ".box" wird zu "[data-box]".
Man kann auch mehrere ID's nutzen, dem Browser ist das alles egal, der fixxt sogar dein Kaputtes HTML so gut wie er kann.
Ich wollte zeigen was einfach Best Practice ist und das sind Klassen, wenig ID's nur wenn wirklich Notwendig.

Zumal "data-" Attribute garnicht dazu gedacht sind als Selektor zu agieren. Möglich ist alles.
Aber warum ich als "Alternative" zu HTML5-Tags HTML5-Attribute nutzen sollte ist mir nicht schlüssig.
Gibt es da einen Vorteil, seh ich etwas nicht? Wenn ja klär mich gern auf.

ne, hat keinen vorteil. mein post ging nur darauf hinaus, das es mehre möglichkeiten gibt, einzelne elemente anzusprechen.

kk, is fine with me.

Du kannst Elemente mit jedem HTML Attribut ansprechen, auch mit CSS z.B. alle Links mit "tel:" vorn dran ansprechen.
"a[href^="tel:"]".

Also Google ruhig wenn du nen CSS Selektor suchst, gibt tausende.