[DISCUSSIE] id's - classes - div's

Ik zit op een ander fora in een kleine discussie over een website.

url : http://bertg.nucleus.be/portfolio/

Nu wat ik hierop had gezegd :

quote:

Hmm, ge lijkt m'n uitleg niet te snappen. Maar ge blijft nog steeds veel meer id's gebruiken dan classes. Nu op zich natuurlijk geen probleem omdat je steeds nieuwe id's aanmaakt en ze dus uniek blijven.

Maar dan heb je het princiepe dus nog niet door. Een ID wordt meestal gebruikt bij een overkoepelende <div>, de andere <div>'s of elementen wat dan in die overkoepelende <div> voorkomen maken dan "meestal" gebruik van classes, nu het mogen het natuurlijk ook id's zijn, maar eigenlijk wordt het zo niet gedaan.
Als voorbeeld kan je misschien eens naar http://www.csszengarden.com surfen, bekijk deze code eens en je begrijpt direct wat ik bedoel.
Ook het feit dat je bijna uitsluitend met <div>'s werkt, lijkt me ook niet zo verstandig voor latere designs dan. Maar ook hier kan je lang over gaan praten en heeft ieder zijn standpunt. Want dan gaat het de richting uit over semantiek en zo, en da's beke way off-topic.

Ik krijg hier een PM over van de desbetreffende gebruiker

quote:

yuw, iv met de hoeveelheid div's en id's op de pagina (want heb geen goesting om in de thred daarop door te gaan).

Mijn opmaak is een vierkant die ik van grote kan verandern als ik dat wens, en heeft op de hoeken en in aan de zijkanten images nodig om de border te vormen.

Aangezien css3 nog niet voldoende ondersteund wordt moet ik voor elk van deze images (hoekjes en borders) een aparte container voorzien, dat verklaart dus de hoeveelheid divs.

Waarom dan ID's? omdat die divs UNIEK zijn binnen de site, en daar mag geen verwarring in ontstaan. De site layout bepaal ik altijd dmv ID's wan vaak heeft elk element z'n eigen eigenschappen, en komen deze uniek voor (zolas hier).

in conclusie, m'n div's en id's zijn wel verantwoord.
thx.

Wat ik nu eens zou willen weten is, of deze jongen hierin gelijk heeft. Want volgens mij is het dus niet zo en maakt hij in z'n design, nog teveel gebruik van die <div>'s en kan het volgens mij nog steeds op een andere manier. Ik weet dat hier op Tweakers.net mensen zijn die hiervan VEEL beter op de hoogte zijn en natuurlijk zou'k graag eens willen weten hoe het nu juist allemaal zit, want op't einde weet ik het ook niet meer wat nu wel juist of niet juist is.

Dus, aan de experts onder jullie, kan iemand mij eens vertellen hoe het nu juist allemaal zit ??

Met een id kan je een element in je document uniek identificeren wat voornamelijk met scripten erg handig. Dat je er toevallig ook nog iets met style mee kan doen is leuk meegenomen maar heeft opzich geen meerwaarde ten opzichte van een class. Een class is herbruikbaar en een id niet maar het maakt verder niets uit wat je gebruikt.

En over te veel divs: als hij de divs gebruikt op plaatjes te positioneren kun je beter het plaatje zelf stylen zodat je geen div hoeft te gebruiken. Verder is het hele div gebruik ansich niet zo'n probleem.

waar is die DIV-soep link ook alweer?

Maar mijn statement is dit verkeerd of zit ik ergens toch juist ?? Ik zou niet graag echt totaal verkeerde dingen willen gaan verspreiden, want dat komt dan ook nogal "dom" over eh.

Want met heel dat gedoe over semantiek, markup, DTD, enz enz... kan ik er soms zelf al niet meer aan uit, van wat is goed en wat is slecht en hoe moet het nu juist. Ingewikkelde materie .

quote:

zkywalker schreef op woensdag 01 juni 2005 @ 15:44:
waar is die DIV-soep link ook alweer?

De DIV-soep link

IS geen probleem om id's te gebruiken. zeker niet als je in je achterhoofd houdt dat je hiermee dynamisch kan werken met css én javascript.

Ikzelf gebruik zelf alleen id's bij unieke dingen, zoals elementen die 1x voorkomen.

Voor de rest probeer ik zoveel mogelijk classes te gebruiken, met de reden dat ik dan minder in mijn css heb staan en dat het overzichtelijker is op die manier.

Ook aanpassen van de elementen hoeft dan maar algemeen te gebeuren.

quote:

I_M_P_A_C_T schreef op woensdag 01 juni 2005 @ 15:47:
[...]


De DIV-soep link

Nee die bedoelde ik niet, laatst is er in een soortgelijk topic een link naar een leuk stukje geplaatst over het overmatig gebruik van DIV.....

De broncode is inderdaad nogal overbodige div-soep! Alleen het begin gaat al goed: Body met lege stijl en vervolgens een div met id=Body. Da's toch niet nodig?
Verder id's voor Title (wat me zoiezo meer een class lijkt) met daarin een hx. Hoeft dus ook niet...
Waar hij zich ook in de vingers kan snijden is het gebruik van een class en een ID met dezelfde naam: content.
De divjes speciaal voor de vormgeving kan ook simpeler. Er zijn enkele methoden waarbij je maar twee divjes nodig hebt. Maar dit kan soms inderdaad lastig zijn. Alleen heb ik hier bijna het idee dat er eerst een tabellenpagina is gemaakt welke toen stap voor stap naar divjes is omgezet.

Verder staat er in de CSS overal dezelfde font-family, kan je net zo goed <font>tags gebruiken
Verder ook veel (x-)dubbele instellingen. Op diverse voorbeelden die hier op GoT langskomen na blijkt vaak de css een sluitpost. Veel CSs hebben de vaste elementen, de specifieke classes en id compleet door elkaar staan. Zo ben je bij aanpassingen nog uren zoet (laat staan een ander).
Mijn idee is toch om een pagina zoveel mogelijk uit te kleden en daarna pas eventueel kapstokken als div's weer toe te voegen indien toch nodig. Dit houdt het al snel overzichtelijker.

Maar goed, op zich zijn die div's misschien geen ramp, net als pagina's met tabellenopmaak. Maar als je de moeite neemt om een beetje overzichtelijk/semantisch te werken wil je gewoon nooit meer zo'n pagina. En dit is iets wat zeer gerelateerd is aan DTP-werk. Je kan heel snel een pagina maken door overal (a la Word) een vet omheen te gooien, ander lettertype etc. Maar als je later de zaak moet aanpassen dan zijn de rapen gaar.
Ik ben wel bang dat we nog een tijdje roependen in de woestijn blijven, maar ach... Ieder zijn hobby, die van velen hier is toevallig schone html en css. Als ons stoepje maar schoon is!
(Ok, juist op dit forum willen we gelukkig wel eens een handje uitsteken als een buurman zijn onkruid tussen de tegels wil verwijderen. Maar eerst kijken hoe ze het zelf aanpakken blijft leuk! Absoluut nofi, btw...

offtopic:

Dank je Zky! Ach ja, gelukkig ook vrouwtje gevonden die min of meer net zo bandjesminded is als ik! Moet trouwens nog eens flink aan de gang met die lijst, hopeloos verouderd...
Jij hebt overigens ook gen verkeerd url in gebruik!

Savantas wijzigde dit bericht 01-06-2005 16:42 (64%)
Reden: lamme vingers krijg je hiervan...

offtopic:
@Savantas: Wat heerlijk om dit tussen je lijst CD`s te zien staan:
dinosaur jr bug
dinosaur jr green mind (ahhhh!!!!!!)
dinosaur jr without a sound

Als het gaat om de PM die je noemt in TS. Het gebruiken van ID's lijkt maar daar inderdaad "fout". Als je 4 divs in een container zet om de hoekjes ok te krijgen dan is het imho beter om de container (eventueel) een ID te geven en de 4 hoekjes-divs een class. Met die constructie kun je namelijk in een keer voor meerdere elementen de hoeken goed zetten (de CSS statements zullen hetzelfde zijn). Daarnaast kun je voor de uitzonderingsgevallen alsnog de elementen uniek aanspreken door #ID .class { /* statements */ } te gebruiken.

Het gebruiken van divs voor opmaak-dingetjes is verder misschien niet erg netjes, maar de auteur van de PM geeft zelf al aan dat er met de huidige CSS ondersteuning van browsers geen nette alternatieven zijn. Dan kun je dus of je design aanpassen of een minder mooie mark-up oplossing zoeken. Die 4 divs zullen verder niets en niemand in de weg zitten, behalve iemand die alleen naar de source zit te loeren...

Jouw voorbeeld van de CSS-zengarden is trouwens een ontzettend slecht voorbeeld om te laten zien hoe het moet. De markup van die site is namelijk opgezet om te laten zien hoe flexibel CSS is en zit zodoende boordevol met nutteloze spans en divs om het maar flexibel te houden.

Deze bedoelen jullie waarschijnlijk: http://www.rikkertkoppes.com/thoughts/smurf-language

Rowanov wijzigde dit bericht 01-06-2005 17:02 (22%)

Je moet gewoon id's gebruiken waar nodig en classen waar mogelijk. Overal id's is vaak niet nodig (want je refereert er nooit aan en/of in css kan je andere (meer specifieke) selectors gebruiken). Alleen classen is vaak niet mogelijk omdat je soms wel moet refereren in Javascript of je selectors wel erg lang worden.

Sendy wijzigde dit bericht 01-06-2005 17:24 (68%)

quote:

André schreef op woensdag 01 juni 2005 @ 15:43:
Met een id kan je een element in je document uniek identificeren wat voornamelijk met scripten erg handig. Dat je er toevallig ook nog iets met style mee kan doen is leuk meegenomen maar heeft opzich geen meerwaarde ten opzichte van een class. Een class is herbruikbaar en een id niet maar het maakt verder niets uit wat je gebruikt.

Op zich heeft het ook een informatieve waarde. Je duid met een ID aan dat het voor element de bedoeling is om maar 1 keer voor te komen in het document. In geval van een class geef je juist weer aan dat het een repeterend element is. Naast die informatie heeft het verder geen meerwaarde nee.

divs gebruik je over het algemeen om meerdere elementen logisch te groeperen. Zo'n groep zou je dan een uniek ID kunnen geven. Voor de rest gebruik je binnen die div selectors om je elementen van CSS te voorzien. Als je daarmee nog niet uit de voeten kan dan gebruik je classes.

Ik gebruik classes eigenlijk alleen voor div's die door bijv php worden gegenereerd. Voor de layout gebruik ik id's aangezien elk deel van de layout uniek is en bijv posts allemaal hetzelfde zijn en dus een class zijn.

overigens als ik dit zie, dan vraag ik me af waarom er niet gewoon van de p-tag gebruik gemaakt is:
HTML:

1	<div class="p">

En mocht je ID's of classes ergens gebruiken, gebruik dan zinvolle namen, dus niet iets als "North"/"South" want dat bepaald uiteindelijk je CSS waar het komt te staan

class geeft een naam van een groep aan, id van een individu, je kan het vergelijken met een naam (of sofinummer) van een persoon en diens beroep.

Een class is een uitbreiding op de element naam, benoemt dus de groep, een element kan tot meerdere klasses horen, maar heeft maar 1 id.

Beiden hebben geen fluit met css te maken, je kan in principe een stijl aan elke element - attribuut combinatie hangen, maar omdat het vrij logisch is dat stylen toegespitst zijn op bepaalde groepen elementen of speciale individuen, hebben ze daar handige shortcut selectors voor gemaakt, helaas ondersteunt IE alleen deze shortcuts en niet de algemene methode.

En omdat er nu toch met mijn linkjes gespammed wordt:
http://www.rikkertkoppes.com/thoughts/class-and-style