Op het moment dat we iets programmeren, dan zit daar een bepaalde volgorde op basis van logica in.
Doe dit, check dat, zo ja dan dit, zo nee dan dat.
Overerving voor het gemak even buiten beschouwing latend, speelt bij CSS de volgorde geen belang. Zo kan ik bijvoorbeeld a { color: blue; } helemaal aan het begin van een CSS-bestand zetten, maar ook net zo goed aan het eind.
Ik ben benieuwd of jullie een bepaalde volgorde hanteren. Stel we willen van een pagina (even heel grof) de header, de content en de footer vormgeven. Zet je dan bijvoorbeeld alles wat in de header staat bij elkaar, vervolgens alles wat met content te maken heeft en als laatste alles wat met de footer te maken heeft? En stel je hebt een class .my_box en een class .your_box, zet je dan bijv. .my_box boven .your_box omdat het dan op alfabetische volgorde staat ... of ... let je gewoon totaal nergens op en knal je gewoon alles onder elkaar in willekeurige volgorde net hoe het uitkomt?
@Ozzie PHP: Nee, in BEM gebruik je geen ID's. Stel je voor dat er een element is wat herhaalt, als je dan een ID gebruikt is dit officieel niet correct.
Het is een aparte manier van werken maar ik krijg er een fijn gevoel bij.
Ja dit klopt, in theorie zou je ook een ID kunnen gebruiken maar als je consistent wilt blijven gebruik je ook hiervoor een class, dit is tenslotte de manier hoe BEM werkt.
Als ik Bootstrap gebruik gebruik ik meestal geen BEM, dit komt omdat de classes niet overeen komen met hoe BEM werkt, behalve als ik kan extenden via SASS/SCSS natuurlijk.
En wat jij zegt is inderdaad de bedoeling, maar .header__a klinkt een beetje abstract, persoonlijk zou ik eerder iets van '.header__logo-anchor of '.header__nav-anchor gebruiken bijvoorbeeld.
Maar heeft ook te maken met persoonlijke voorkeur, zelf zou ik dan in mijn stylesheet een soort sectie genaamd "Globaal" maken en vervolgens daar de globale/universele een stijlen plaatst.
Aangezien ik met SCSS werk gebruik ik meerdere bestanden en maakt de volgorde niet zo heel veel uit (tenzij je op element niveau werkt), de opbouw van deze bestanden ziet er een beetje als volgt uit:
theme
- base
- base.scss
- components
- block.scss
- breadcrumb.scss
- button.scss
- form.scss
- navigation.scss
- slider.scss
- socialmedia.scss
- layout
- header.scss
- footer.scss
- sidebar.scss
- tools
- vars.scss
- mixins.scss
- main.scss (hier include ik alleen maar de losse scss bestanden)
Voor het werk gebruik ik BEM, voor mijn eigen freelance projecten gebruik ik geen BEM omdat ik het niet echt een toegevoegde waarde vind (maakt de classes alleen maar langer en dus meer typen). Het hangt er vanaf hoe duidelijk je zelf de naamgeving doet en hoe je die definieert in CSS.
[size=xsmall]Toevoeging op 12/03/2018 12:38:38:[/size]
Ozzie PHP op 09/03/2018 17:04:34
Kun je bijv. nog wel zeggen: a { tekst-decoration: none; }
Je hoeft niet alles met een class te doen, je kunt gewoon ook stijlen aan de hand van het element. Hiermee stijl je de 'default' dingen zoals een a, h1, h2, p, etc.
[size=xsmall]Toevoeging op 12/03/2018 12:43:09:[/size]
Ozzie PHP op 08/03/2018 20:27:04
@Anoniem M
Nee klopt, een ID gebruik je uitsluitend voor unieke elementen (die maar 1x voorkomen).
Een logo komt meestal maar 1x voor. Ik gebruik dan normaliter #LOGO, maar bij BEM gebruik je dan .header__logo? Klopt dat?
Zelf gebruik ik NOOIT een ID voor CSS, het is onnodig en alleen maar meer kans op problemen. Hoezo komt een logo meestal maar 1 keer voor? Logo's komen ook regelmatig voor in de footer, of als 'trust icons' of als partners etc. Daarom raad ik af om ID's te gebruiken voor CSS, voor Javascript kun je het wel gebruiken (maar ook daar gebruik ik ze zelden).
