[CSS] Correcte schrijfwijze

Nadat ik een tijdje maar wat aangeklooid heb met css, ben ik mij toch wat meer gaan verdiepen in de correcte manier van schrijven van css. Na mij verdiept te hebben bleven een aantal zaken onduidelijk:

1. Wanneer gebruik je een id en wanneer een class om later aan te refereren in je stylesheet? Ofwel, wanneer gebruik je #blaat en wanneer .blaat?

2. Is het een goede gewoonte om html-tags binnen je div's/blocks op te nemen, dus dat je zaken krijgt als

HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div id="block1">     <b>Vette opmaak 1</b> </div> <div id="block2">     <b>Vette opmaak 2</b> </div> //CSS #block1 b {     /*Opmaak 1*/ } #block2 b {     /*Opmaak 2*/ }

3. Kun je geneste div's/blocks ook op een 'geneste manier' aanspreken? Dus dat het block blaat binnen schaap een andere opmaak krijgt als blaat binnen schaap2? Ik snap dat mocht iets dergelijks mogelijk zijn (en tevens correct), je dan natuurlijk over classes i.p.v. id's praat.

jaapdejong wijzigde dit bericht 19-07-2005 14:52 (14%)

Meerdere elements kunnen een class aannemen, terwijl ID's uniek zijn voor elk element!

quote:

jaapdejong schreef op dinsdag 19 juli 2005 @ 14:46:
Nadat ik een tijdje maar wat aangeklooid heb met css, ben ik mij toch wat meer gaan verdiepen in de correcte manier van schrijven van css. Na mij verdiept te hebben bleven een aantal zaken onduidelijk:

1. Wanneer gebruik je een id en wanneer een class om later aan te refereren in je stylesheet? Ofwel, wanneer gebruik je #blaat en wanneer .blaat?

2. Is het een goede gewoonte om html-tags binnen je div's/blocks op te nemen, dus dat je zaken krijgt als

HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div id="block1">     <b>Vette opmaak 1</b> </div> <div id="block2">     <b>Vette opmaak 2</b> </div> //CSS #block1 b {     /*Opmaak 1*/ } #block2 b {     /*Opmaak 2*/ }

3. Kun je geneste div's/blocks ook op een 'geneste manier' aanspreken? Dus dat het block blaat binnen schaap een andere opmaak krijgt als blaat binnen schaap2?

ad 1) Je gebruikt id's voor individuele tags, zaken die maar 1 keer op je pagina voorkomen. Classes gebruik je voor zaken die meer dan eens voorkomen.

ad 2) Het is prima om HTML binnen je divs te gebruiken. Helaas gebruik je in je voorbeeld opmaaktags <b> en dat is nou net iets dat je beter in je CSS kan regelen. Probeer je HTML semantisch zo correct mogelijk te schrijven en de opmaak te beperken tot je CSS file

ad 3) Ja.. je kan een onderscheid aanbrengen tussen dezelfde klasse binnen een bepaalde andere klasse of id:


code:

#schaap .blaat {
    color: blue;
}

#schaap2 .blaat {
    color: green;
}

edit: class en id identifiers omgedraaid

Glewellyn wijzigde dit bericht 19-07-2005 15:00 (12%)

1) id gebruik je als je een bepaald element er anders uit wilt laten zien, class als je een bepaalde classe een ander uiterlijk wil geven. Onthoud dat beide attributen niks met css te maken hebben, maar alleen als kapstok worden gebruikt (net als dat kan (zou moeten kunnen) met elementnamen en elke ander attribuut) http://www.rikkertkoppes.com/thoughts/class-and-style

2) ja, in een <div> hoort eigenlijk altijd een ander element imho, maar dat heeft niks met css te maken, maar met html. Toch is het volgens de spec niet strikt noodzakelijk http://www.rikkertkoppes.com/thoughts/about-div

3) ja, zoals je in je eigen voorbeeld al aangeeft kan je die <b> op 2 manieren opmaken

edit:
wat een gespam, maar ik denk dat het er wel aardig op aansluit

mophor wijzigde dit bericht 19-07-2005 14:57 (7%)

1. Een class gebruik je als er meerdere van zijn, bijv menuitems. Een id als er maar 1 van is, bijvoorbeeld voor je layout-div's

2. Ja, hierdoor kan je code veel duidelijker worden en bespaard je een hoop html <font> werk etc
Bijvoorbeeld voor #content p en #footer p een andere opmaak

3.
.schaap .blaat {
//opmaak voor blaat binnen schaap
}

.schaap2 .blaat {
// opmaak voor blaat binnen schaap2
}


Edit: ik geloof dat het wel duidelijk is

Shadow wijzigde dit bericht 19-07-2005 14:58 (7%)

quote:

jaapdejong:
Nadat ik een tijdje maar wat aangeklooid heb met css, ben ik mij toch wat meer gaan verdiepen in de correcte manier van schrijven van css. Na mij verdiept te hebben bleven een aantal zaken onduidelijk:

1. Wanneer gebruik je een id en wanneer een class om later aan te refereren in je stylesheet? Ofwel, wanneer gebruik je #blaat en wanneer .blaat?

Bij voorkeur gebruik je classes omdat classes op meerdere elementen toegepast kunnen worden en een id maar 1x voor mag komen in het gehele document. Soms is het handiger om de #someId te gebruiken omdat een element toch al een id heeft t.b.v. van bijv. Javascript en een extra class niet veel toevoegt.

quote:

2. Is het een goede gewoonte om html-tags binnen je div's/blocks op te nemen, dus dat je zaken krijgt als
HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div id="block1">     <b>Vette opmaak 1</b> </div> <div id="block2">     <b>Vette opmaak 2</b> </div> //CSS #block1 b {     /*Opmaak 1*/ } #block2 b {     /*Opmaak 2*/ }

Allereerst zou ik de 'b' niet meer gebruiken, die is achterhaald, maar dat was je vraag niet.

Het hangt er vanaf. Je zou het geneste element alleen maar hoeven gebruiken als het meer betekenis geeft aan de inhoud van het containing element. Bijvoorbeeld:
code:

<div>
   <!-- this section starts here, but only contains one paragraph -->
   <p>Some paragraaf</p>
</div>

Je vraag is eigenlijk een beetje te vaag om er een eenduiding antwoord op te geven.

quote:

3. Kun je geneste div's/blocks ook op een 'geneste manier' aanspreken? Dus dat het block blaat binnen schaap een andere opmaak krijgt als blaat binnen schaap2?

Volgens mij geef je in het stukje hierboven (#block2 b) eigenlijk al aan hoe dat moet.

quote:

Ik snap dat mocht iets dergelijks mogelijk zijn (en tevens correct), je dan natuurlijk over classes i.p.v. id's praat.

Geen idee wat je hiermee bedoelt

edit:
En toch wist ik stiekem van te voren al dat ik een spuit-11 post zou gaan maken

drm wijzigde dit bericht 19-07-2005 15:03 (14%)

quote:

drm schreef op dinsdag 19 juli 2005 @ 15:01:
[...]
Bij voorkeur gebruik je classes omdat classes op meerdere elementen toegepast kunnen worden en een id maar 1x voor mag komen in het gehele document. Soms is het handiger om de #someId te gebruiken omdat een element toch al een id heeft t.b.v. van bijv. Javascript en een extra class niet veel toevoegt.


[...]
Allereerst zou ik de 'b' niet meer gebruiken, die is achterhaald, maar dat was je vraag niet.

Het hangt er vanaf. Je zou het geneste element alleen maar hoeven gebruiken als het meer betekenis geeft aan de inhoud van het containing element. Bijvoorbeeld:
code:

<div>
   <!-- this section starts here, but only contains one paragraph -->
   <p>Some paragraaf</p>
</div>

Je vraag is eigenlijk een beetje te vaag om er een eenduiding antwoord op te geven.


[...]
Volgens mij geef je in het stukje hierboven (#block2 b) eigenlijk al aan hoe dat moet.

Klopt, maar dan alleen voor html-tags binnen een block.


[...]
Geen idee wat je hiermee bedoelt

Ik bedoel hiermee te zeggen dat ik snap dat je niet meerdere elementen met het zelfde ID kunt hebben. Het nesten gebeurt dus alleen met classes

edit:
En toch wist ik stiekem van te voren al dat ik een spuit-11 post zou gaan maken

Het is mij verder nu wel vrij duidelijk hoe ik correct css moet schrijven. Bedankt voor de reacties!

PS - Het valt me trouwens op dat T.net nog tabellen voor de opmaak gebruikt. Dat zal wel te maken hebben met compatibiliteit met meerdere browsers?

jaapdejong wijzigde dit bericht 19-07-2005 15:59 (11%)

quote:

jaapdejong schreef op dinsdag 19 juli 2005 @ 15:57:
[...]
PS - Het valt me trouwens op dat T.net nog tabellen voor de opmaak gebruikt. Dat zal wel te maken hebben met compatibiliteit met meerdere browsers?

De laatste layout change van de frontpage is alweer een paar jaartjes geleden. Het is dus puur legacy...
GoT heeft vorig jaar nog een complete make-over gehad en daarbij zijn we wel uitgegaan van semantische HTML; dat zal voor de FP ook nog wel gaan gebeuren

/offtopic Blaat gebruik je ALTIJD bij devven

Ik ben nu bezig met het semantisch zo correct mogelijk schrijven van mijn webpagina's. Nu vraag ik mij af of het heel ranzig is om de head-tag en de body-tag ook te gebruiken binnen een block?

HTML:

1 2 3 4

<div id="myBlock">     <head>De header van het blok</head>     <body>De body van het blok</body> </div>

da's ranzig en fout ja (lees de spec gewoon als je je zoiets afvraagt), gebruik gewoon hx voor headers en p voor alinea's erbinnen

dus:
code:

<div>
  <h1>kop</h1>
  <p></p>
  <p></p>
  <div>
    <h2>subparagraaf</h2>
    <p></p>
  </div>
  <p>nog ff een alinea in het hoofdblok</p>
</div>

zo ziet een algemene structuur eruit

mophor wijzigde dit bericht 20-07-2005 14:00 (56%)

quote:

jaapdejong schreef op woensdag 20 juli 2005 @ 13:53:
Ik ben nu bezig met het semantisch zo correct mogelijk schrijven van mijn webpagina's. Nu vraag ik mij af of het heel ranzig is om de head-tag en de body-tag ook te gebruiken binnen een block?


HTML:

1 2 3 4

<div id="myBlock">     <head>De header van het blok</head>     <body>De body van het blok</body> </div>

De head en body vallen buiten de daadwerkelijke (zichtbare) opmaak. Je begint pas met opmaken na <head> en <body> dus om deze in een div te frotten is echt bullshit

edit:
Of bedoel je met head en body de kop en de inhoud van een blok? Als je dat bedoelt, moet je ze in ieder geval niet head en body noemen

Wacky wijzigde dit bericht 20-07-2005 14:00 (18%)

quote:

Wacky schreef op woensdag 20 juli 2005 @ 13:59:
[...]


De head en body vallen buiten de daadwerkelijke (zichtbare) opmaak. Je begint pas met opmaken na <head> en <body> dus om deze in een div te frotten is echt bullshit

edit:
Of bedoel je met head en body de kop en de inhoud van een blok? Als je dat bedoelt, moet je ze in ieder geval niet head en body noemen

Dat bedoel ik inderdaad. Het lijkt mij semantisch gezien juist heel correct om 'head' en 'body' te gebruiken om de header en de body te beschrijven. Natuurlijk kun je ook 'h1' en 'p' gebruiken, waarbij die 'p' naar mijn mening niet goed duidelijk maakt dat het om een body gaat. Maar goed, de head-tag en de body-tag zijn dus expliciet gereserveerd voor de header en body van het html-document.

jaapdejong wijzigde dit bericht 20-07-2005 14:14 (6%)

quote:

jaapdejong schreef op woensdag 20 juli 2005 @ 14:08:
[...]


Dat bedoel ik inderdaad. Het lijkt mij semantisch gezien juist heel correct om 'head' en 'body' te gebruiken om de header en de body te beschrijven. Natuurlijk kun je ook 'h1' en 'p' gebruiken, waarbij die 'p' naar mijn mening niet goed duidelijk maakt dat het om een body gaat. Maar goed, de head-tag en de body-tag zijn dus expliciet gereserveerd voor de header en body van het html-document.

Een parser snapt classnames als 'head' en 'body' niet en kan daar dus ook geen enkele sematische waarde aan hechten. (even uitgaande dat je classnames bedoelt)

Tags als h1 (header categorie 1) en p (paragraaf/content deel) snapt ie wel.

In feite is dat dus precies de header- en body tag die je zoekt.

Bosmonster wijzigde dit bericht 20-07-2005 14:22 (12%)

vertaal p liever met alinea en div met paragraaf, dat maakt het in het nederlands een stuk duidelijker

quote:

mophor schreef op woensdag 20 juli 2005 @ 14:22:
vertaal p liever met alinea en div met paragraaf, dat maakt het in het nederlands een stuk duidelijker

alinea is een synoniem voor paragraaf

(of ben ik nou gek)

Bosmonster wijzigde dit bericht 20-07-2005 14:23 (5%)

mja, in het engels is het hetzelfde, in het nederlands wordt met paragraaf vaak een subhoofdstuk aangeduidt (~paragraaf 1.2), met alinea een stuk bij elkaar horende tekst. Alinea's bevatten ook geen lijsten, tabellen etc, paragrafen wel. Daarom mag p die dingen ook niet bevatten. Hier verwonderen mensen zich nogal eens over

<div> is een cluster element (paragraaf) dat alinea's, lijsten, tabellen etc met een header (hx) samenvoegt tot een paragraaf / hoofdstuk. D'r is ook nogal eens verwarring over waar div nu eigenlijk voor is, het is dus een element dat hoofdstukken / paragrafen aangeeft (zie mijn link hierboven)

In essentie is div een apart block element, namelijk een die een stapje hoger staat in de hierarchie, net als <map>, <blockquote>, en <form>. Deze laatste elementen mogen ook geen inline elementen bevatten en imho zou dat voor <div> ook moeten gelden.

Ik heb dit hier eens opgepend

mophor wijzigde dit bericht 20-07-2005 14:30 (37%)

quote:

mophor schreef op woensdag 20 juli 2005 @ 14:26:
mja, in het engels is het hetzelfde, in het nederlands wordt met paragraaf vaak een subhoofdstuk aangeduidt (~paragraaf 1.2), met alinea een stuk bij elkaar horende tekst. Alinea's bevatten ook geen lijsten, tabellen etc, paragrafen wel. Daarom mag p die dingen ook niet bevatten. Hier verwonderen mensen zich nogal eens over

is een cluster element (paragraaf) dat alinea's, lijsten, tabellen etc met een header (hx) samenvoegt tot een paragraaf / hoofdstuk

Ah ja.. zo had ik er nog nooit naar gekeken

quote:

Bosmonster schreef op woensdag 20 juli 2005 @ 14:22:
[...]


alinea is een synoniem voor paragraaf

(of ben ik nou gek)

quote: http://www.vandale.nl/opz...boek/?zoekwoord=paragraaf

pa·ra·graaf (de ~ (m.), -grafen)
1 paragraafteken
2 onderdeel van een hoofdstuk, een artikel, een wet of een officieel stuk

quote: http://www.vandale.nl/opzoeken/woordenboek/?zoekwoord=alinea

ali·nea (de ~ (v.), ~'s)
1 tekstgedeelte dat op een nieuwe regel begint en doorloopt tot de volgende nieuwe regel
2 deel van een wetsartikel, reglement enz. => lid

En voor 'div' vind ik dat je 'gedeelte' zou moeten gebruiken, precies zoals de volledige naam in het Engels luidt: 'division'.

Edit:

Mophor was me voor

jaapdejong wijzigde dit bericht 20-07-2005 14:33 (17%)

idd, zo zou je het kunnen noemen, belangrijkste is dat <p> alinea is en niet paragraaf in bovenstaande definitie (de (on)gein is dat je beiden in het engels met paragraph vertaald)

mophor wijzigde dit bericht 20-07-2005 14:33 (27%)

Hoe zit het semantisch gezien dan met de "opmaak" div's? Qua opmaak is het bij mij meestal "top","menu","content" en "footer". Kan/doet bijv. google hier iets mee? Snapt de bot dat in de content de inhoud staat? In de content div wordt uiteraard wel gebruik gemaakt van <h1> en <p>

Blijft een feit dat ik nog liever <div class="body"></div> gebruik, dan dat ik de body als alinea bestempel. Wat vinden jullie correcter:

HTML:

1 2 3 4

<div id="myBox">     <h1>Le header</h1>     <p>Le body</p> </div>

of

HTML:

1 2 3 4

<div id="myBox">     <h1>Le header</h1>     <div class="body">Le body</div> </div>

Edit:

Na het lezen van Mophor's stukje, zie ik dat het gebruik van een paragraaf (div) correcter is dan het gebruik van een alinea (p). Mijn intuïtie was juist.

Na het lezen van onderstaande reactie zou ik dus toch 'alinea' moeten gebruiken.

jaapdejong wijzigde dit bericht 20-07-2005 14:48 (79%)

in principe heb je ze bijna niet meer nodig, maar natuurlijk kom je er af en toe niet onderuit. Navigatie zou ik in een <map> element zetten, en verder zou ik div's die puur voor structuur zijn een class="structural" meegeven, omdat ze echt iets anders zijn dan div's om hoofdstukken / paragrafen mee aan te geven. Niet dat een parser er iets mee doet, maar ik vind het voor mezelf wel overzichtelijk.

Waarschijnlijk staat er verder in je header en footer dusdanig weinig "content" dat dit ook niet kwaad kan bij indexeren. (Al zou ik een class waarmee je aangeeft dat een stuk niet geindexeerd hoeft te worden wel op prijs stellen)

@hierboven: nr1, de div eromheen zorgt dat de p en de h1 bij elkaar horen, eventueel kunnen er meerdere p's achteraan. Mocht je om opmaak redenen een extra div om die p's nodig hebben, doe dat dan gewoon gerust (class="structural"), maar bebruik wel p's binnen die div. IMHO is direct inline content binnen een div not done.

reactie op je edit: een hx hoort binnen een paragraaf (div), samen met alle p's tables etc.

dus:

code:

<div id="myBox">
    <h1>Le header</h1>
    <p>Le body</p>
    <p>meer body</p>
</div>

en eventueel als je dat echt nodig hebt voor opmaak:
code:

<div id="myBox">
    <h1>Le header</h1>
    <div class="structural">
      <p>Le body</p>
      <p>meer body</p>
    </div>
</div>

note het verschil in betekenis tussen de 2 divs, de buitenste stelt een hoofdstuk / paragraaf voor, de binnenste een "generic container", die puur voor opmaak doeleinden ertussen wordt gezet, de tweede heeft ook geen semantische waarde, de eerste wel

mophor wijzigde dit bericht 20-07-2005 14:52 (63%)

quote:

mophor schreef op woensdag 20 juli 2005 @ 14:42:
in principe heb je ze bijna niet meer nodig, maar natuurlijk kom je er af en toe niet onderuit. Navigatie zou ik in een <map> element zetten, en verder zou ik div's die puur voor structuur zijn een class="structural" meegeven, omdat ze echt iets anders zijn dan div's om hoofdstukken / paragrafen mee aan te geven. Niet dat een parser er iets mee doet, maar ik vind het voor mezelf wel overzichtelijk.

Waarschijnlijk staat er verder in je header en footer dusdanig weinig "content" dat dit ook niet kwaad kan bij indexeren. (Al zou ik een class waarmee je aangeeft dat een stuk niet geindexeerd hoeft te worden wel op prijs stellen)

@hierboven: nr1, de div eromheen zorgt dat de p en de h1 bij elkaar horen, eventueel kunnen er meerdere p's achteraan. Mocht je om opmaak redenen een extra div om die p's nodig hebben, doe dat dan gewoon gerust (class="structural"), maar bebruik wel p's binnen die div. IMHO is direct inline content binnen een div not done.

reactie op je edit: een hx hoort binnen een paragraaf (div), samen met alle p's tables etc.

Het mapelement is toch puur en alleen bedoeld om te gebruiken als imagemap?

quote: http://www.w3schools.com/tags/tag_map.asp

The <map> tag
Definition and Usage

Defines a client-side image-map. An image-map is an image with clickable regions.

nope:

quote: http://www.w3.org/TR/html401/struct/objects.html#edef-MAP

The MAP element specifies a client-side image map (or other navigation mechanism) that may be associated with another elements (IMG, OBJECT, or INPUT). An image map is associated with an element via the element's usemap attribute. The MAP element may be used without an associated image for general navigation mechanisms.

check de eerste en laatste zin.

mophor wijzigde dit bericht 20-07-2005 14:55 (3%)