div of p
Dat is niet de bedoeling. Je moet wel degelijk commentaar schrijven, maar niet boven iedere regel. Ik zou zeker boven iedere functie/method een korte omschrijving plaatsen zodat je over een paar maanden nog weet wat de functie doet.
>> De website heeft maar 1 header, 1 footer, etc., daarom gebruik ik id's.
Dat is niet nodig. Het zijn elementen die maar 1 keer voorkomen en juist daarom hoef je ze geen ID te geven. Je kunt ze rechstreeks aanspreken.
>> Mocht ik ooit een article element gebruiken met een header en footer, dan moet deze niet dezelfde stijl krijgen als de header en footer in de layout.
De header/footer in een article spreek je dan (als ik me niet vergis) als volgt via css aan: "article > header { color: red; }".
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
header {
color: red;
font-size: 14px;
}
article > header {
color: blue;
}
color: red;
font-size: 14px;
}
article > header {
color: blue;
}
Tevens raad ik aan altijd classes te gebruiken. Dus .article__header bijv. en .page__header. Zie ook artikelen over de BEM methode: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
Bedoel je "article header" ipv "article > header"?
Maar waarom altijd classes gebruiken voor iets wat je ook zonder classes kunt aanspreken?
Als je BEM verkeerd gebruikt, krijg je inderdaad classitis.
X Y is de descendant combinator.
X > Y is de child combinator.
Handig voor in de bookmarks: cheatsheet met 30 CSS-selectors
Raad jij dan aan om elementen via de semantiek aan te spreken, of (zoals Wouter voorstelt) overal een class aan geven en die class aanspreken?
Het een sluit het ander niet uit: BEM is vooral een systeem om tot logisch gestructureerde CSS-klassen te komen. Kan het zonder CSS-klassen, dan kan het dus zonder BEM.
Alles uit HTML nog eens overdoen in CSS is onzinnig:
Code (php)
1
2
3
2
3
<footer class="footer">
...
</footer>
...
</footer>
Alleen kun je wel in een situatie verzeilen waarin een browser (meestal the usual suspect) iets niet goed doet en je dat moet omzeilen:
Code (php)
1
2
3
4
5
2
3
4
5
<footer>
<div class="footer">
...
</div>
</footer>
<div class="footer">
...
</div>
</footer>
De vraag is dan dus: moet je dat op voorhand al doen? Ik denk persoonlijk van niet. Een probleem los je op als het zich aandient. Alleen als je grootschalige frameworks bouwt, loont het de moeite om problemen bij voorbaat al uit te sluiten.
Code (php)
1
<header id="header"></header>
Hoe specificeer ik in de css dan dat ik het over de header heb die ik wil aanpassen, en niet over de header van bijvoorbeeld een article? Ik begrijp uit de berichten hierboven dat dit dan moet door middel van een class (article__header, page__header). Waarom mag dat dan wel op die manier?
Gelukkig leerde ik toen BEM kennen, dat is de rede dat ik tegenwoordig vaak de BEM methode gebruik. Waarom je dan .article__header gebruikt en niet gewoon .article header? Omdat een aside ook een header krijgt, die willen we niet de stijlen van de article header meegeven. Aangezien een aside ook in een artikel (juist in een artikel) voorkomt krijg je dan weer hetzelfde verhaal.
Waarom ik het gebruik van IDs afraad voor CSS? Omdat je je dan heel erg beperkt. Als je een id="article-header" gebruikt zal je dus nooit meer dan 1 artikel header op je pagina mogen hebben. Is dat even een ramp voor de categorie pagina die tientallen artikels (de headers) laat zien :)
Omdat je nu nog niet weet wat je straks misschien wilt toevoegen zal ik dingen altijd zo min mogelijk beperkend maken. En als je dan toch al 95% classes gebruikt zou ik die andere 5% voor consistentie ook als class gaan gebruiken (en je weet maar nooit...).
Wouter J op 18/02/2015 17:26:01:
Als je een id="article-header" gebruikt zal je dus nooit meer dan 1 artikel header op je pagina mogen hebben. Is dat even een ramp voor de categorie pagina die tientallen artikels (de headers) laat zien :)
Bij elementen die vaker op een pagina voorkomen snap ik dat het niet handig is daar een id te gebruiken. Maar een pagina heeft over het algemeen toch niet meer dan één header of footer? (Hiermee bedoel ik de header en footer van de body en niet persé alle headers en footers die in de body zitten, dit kunnen er natuurlijk meer zijn). En juist omdat deze header en footer maar één keer verkomen heb ik ze het id "header" en "footer" meegegeven. Of kan ik ze in dat geval beter het id "page-header" en "page-footer" meegeven?
Dan krijg je <header id="header"> in plaats van gewoon <header>, wat bij één <header> nergens voor nodig is. Bij CSS moet je opletten dat je niet naar de specificity hell afdaalt.
Ward van der Put op 18/02/2015 19:09:56:
>> En juist omdat deze header en footer maar één keer voorkoren heb ik ze het id "header" en "footer" meegegeven.
Dan krijg je <header id="header"> in plaats van gewoon <header>, wat bij één <header> nergens voor nodig is. Bij CSS moet je opletten dat je niet naar de specificity hell afdaalt.
Dan krijg je <header id="header"> in plaats van gewoon <header>, wat bij één <header> nergens voor nodig is. Bij CSS moet je opletten dat je niet naar de specificity hell afdaalt.
Wanneer ik meerdere headers gebruik / ga gebruiken zou ik dit dus wel kunnen gebruiken:
Code (php)
1
<header id="header"></header>
Want eerder in dit topic werd juist gezegd dit niet te doen. :/
Gewijzigd op 18/02/2015 19:33:55 door Lord Gaga
>> Wanneer ik meerdere headers gebruik / ga gebruiken zou ik dit dus wel kunnen gebruiken:
Nee, want een ID mag maar 1x voorkomen.
Je zou dus wel meerdere keren <header class="some_header"></header> kunnen gebruiken.
@Wouter:
Nog even terug komend op jouw verhaal ... eigenlijk gebruik jij dus classes om de (negatieve) gevolgen van overerving tegen te gaan. Daar komt het dan toch op neer?
Ozzie PHP op 18/02/2015 20:21:17:
Nee, want een ID mag maar 1x voorkomen.
Klopt, en #header komt ook maar 1x voor, want deze geeft de header van de body aan. Daarom vroeg ik ook of ik deze dan beter #page-header kon noemen.