webForumDet fria alternativet

Förklara skillnaden mellan ID och Class lite djupare. Nackdel med bara Class?

HTML & CSS

4 svar · 741 visningar · startad av xtreme

Medlem sedan juli 20002 056 inlägg
Frågan#1

Vet vad skillnaden mellan ID och Class är men när ska man egentligen använda vad och spelar det verkligen någon roll? Brukar oftast bara använda Class.

Vad jag förstått så är ID ett unikt element och Class kan användas på flera ställen. Man ska använda ID när det bara finns en förekomst per sida och avända klasser när det finns en eller flera förekomster per sida.

ID = A person's Identification (ID) is unique to one person.
Class = There are many people in a class

Min fråga är egentligen om det finns någon nackdel med att bara använd class rakt av. Man vet ju inte senare om man måste använda något flera gånger och då måste man ändra från ID till Class.

Medlem sedan aug. 20068 090 inlägg
#2

Du kan i princip köra class rakt av. Men det KAN innebära problem och/eller extra jobb längre fram när du faktiskt vill formatera ett enda element på en sida.

Men ett id har även andra egenskaper än att vara unikt. Det är t.ex. mer specifikt och "övertrumfar" class, det används i javascripter och i server-sidespråk som ASP och PHP och det identifieras snabbare i DOM än class.

Medlem sedan juni 20019 519 inlägg
#3

Jag använder mig bara av id nästan bara för att hitta den snabbare i DOM-en istället för att söka ifrån document, om jag vill göra något med a-element i ett dokument och jag vet att det är en meny som skall ha ett unikt beteende så sätt id på menyn så att du kan hämta upp alla a-element ifrån den.

Att den heter .main-navigation eller #main-navigation i en CSS mall spelar mindre roll, förutom att i praktiken så skulle du kunna ha fler element med klassen main-navigation, men i CSS och HTML så kan du ha fler element med samma ID också, kommer inte validera eller ge dig ett bra resultat när du börjar jobba mot Javascript, men webbläsaren kommer sätta styles på båda dina #main-navigation.

Medlem sedan maj 20012 237 inlägg
#4

Egentligen borde man ju kunna indentifiera olika element även om de har samma id.

div#foo {}

span#foo{}

div#lol div#foo{}

div#bar div#foo{}

Då måste man dock ange hela sökvägen, så att säga.

Fast det är väl inte tillåtet enligt specifikationerna?

Medlem sedan apr. 20003 174 inlägg
#5

För enbart CSS så funkar det alldeles utmärkt med bara class. :)

Id's är typ programmerarens motsvarighet till "singletons". Det kan/ska bara finnas en instans av ett id i dokumentet. Detta betyder att det inte finns något sätt att återanvända det, det är en 1 - 1 relation, och en css-fil som innehåller en mängd kod som bara kan användas en gång svämmar lätt över.. och det är aldrig bra med bloatade CSS-filer. §e

Detta är faktiskt ett ämne som diskuteras, och har diskuterats flitigt, i "webbsvängen" ett tag nu, och merparten verkar pratar varmt om att bara använda class för style, och id för JavaScript.

Måste dock nämna, när vi ändå är på ämnet.. att en viktig sak att ta i beaktning dock är att förstå hur webbläsare läser dina selektorer.
Här finns mycket "tid" att vinna i webbsidan rendering, och här har id en liten lite liten liten fördel gentemot class när det kommer till performance.

Jo, selektorer ja.. en webbläsare läser nämligen dina selektorer från höger till vänster, vilket exeplifierat innebär att följande CSS .main-navigation ul li a {..} läses som;

  1. Lokalisera alla <a> i dokumentet.
  2. Kontrollera vilka av dessa <a> som har en <li> som förälder i något led.
  3. Kontrollera vilka av dessa <li> som har en <ul> som förälder i något led.
  4. Kontrollera vilka av dessa <ul> som har ett element med classen .main-navigation som förälder i något led.
  5. Fortsätt traversera upp till <html>.
  6. Så där, nu vet webbläsaren vilka <a> som min style ska appliceras på.

Om man dock bara anger en selektor, ex #main-navigation {..} så lokaliserar webbläsaren den fortare eftersom det bara ska finnas ett id per dokument, och webbläsaren kan således applicera din style fortare.
Dock räcker det med att man lägger till ett element till i selektorn så är hela vinsten borta.

Skulle man ranka performance på selektorer skulle man kunna säga:

  1. #main-navigation {..}
  2. .main-navigation {..}
  3. Längre selektorer..

Nu kom jag visst bort från själva ämnet lite, hehe. :stud

Men anyhow.. själv använder jag främst och mest classer för style. Id's använder jag främst som referens för att hoooka på olika JavaScript-funktioner.
Jag tycker det är mycket enklare att utveckla, vidareutveckla och underhålla stora webbplatser när man använd en class-approach.

Thats my 5 cent. :birp

272 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
132 ms — deklarationer (db)
0 ms — hämta statistik (cache)
136 ms — hämta tråd, inlägg och bilagor (db)
122 ms — ändringar (db)