Volgorde in CSS

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ozzie PHP

Ozzie PHP

07/03/2018 21:54:52
Quote Anchor link
Een vraag puur uit nieuwsgierigheid ...

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?

Ik ben benieuwd ...
 
PHP hulp

PHP hulp

28/03/2024 13:01:59
 
Thomas van den Heuvel

Thomas van den Heuvel

07/03/2018 22:46:45
Quote Anchor link
Ozzie PHP op 07/03/2018 21:54:52:
speelt bij CSS de volgorde geen belang.

Volgens mij was dit wel van belang, een bron moet ik je nog even schuldig blijven maar het staat mij bij dat de volgorde wel degelijk uitmaakt.

EDIT: volgorde maakt in zekere zin zeker uit. Je zou dus altijd kunnen beginnen met (het includen van) een stylesheet voor een "blanco" stijl die altijd geldt, als een soort van basis voor de rest (default.css / style.css / reset.css etc.).
Gewijzigd op 07/03/2018 23:06:06 door Thomas van den Heuvel
 
Ozzie PHP

Ozzie PHP

07/03/2018 23:01:35
Quote Anchor link
@Thomas

Ja de volgorde is van belang wat betreft overerving ... maar dat wil ik in deze discussie dus even buiten beschouwing laten. Vandaar dat ik al schreef "Overerving voor het gemak even buiten beschouwing latend".
 
- Ariën  -
Beheerder

- Ariën -

07/03/2018 23:11:57
Quote Anchor link
Ik kan vertellen dat er inderdaad een volgorde in zit. Ik ben er wel eens tegen aan gelopen op één of andere manier.

Maar om op de vraag terug te komen. De properties organiseer ik alfabetisch, de selectors weer niet.
 
Thomas van den Heuvel

Thomas van den Heuvel

07/03/2018 23:26:13
Quote Anchor link
Zie hyperlink in vorige bericht omtrent volgorde.

Ik sorteer in eerste instantie mijn CSS organisatorisch: voor specifieke pagina's en maintemplates heb ik aparte stylesheets (waarbij de CSS voor de specifieke pagina's vaak een uitbreiding / afwijking zijn van de CSS van de maintemplates). Bijvoorbeeld style.css voor het frontend maintemplate, admin.css voor het backend maintemplates en movies.css voor een specifieke beheerpagina voor films en series.
Ook voor grote stukken functionaliteit heb ik aparte stylesheets, zo heb ik een aparte stylesheet voor mijn website-boom-backend-pagina.

En in tweede instantie hiërarchish, waarin ik van algemene naar specifieke regels ga. Ook groepeer ik deze in blokken, eventueel voorzien van /* commentaar */.

Dit ziet er dan bijvoorbeeld als volgt uit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@CHARSET "UTF-8";
table.node-tree                         { table-layout: fixed; width: 100%; border: 0; border-collapse: collapse; margin: 0; padding: 0; color: #000000; }
table.node-tree tr                      { line-height: 25px; background-color: #ffffff; border-bottom: 1px solid #efefef; }
table.node-tree .level-0                { background-color: #b0b0b0; }
table.node-tree .level-1                { background-color: #c0c0c0; }
table.node-tree .level-2                { background-color: #d0d0d0; }
table.node-tree .level-3                { background-color: #e0e0e0; }
table.node-tree .level-4                { background-color: #f0f0f0; }
table.node-tree tr td                   { height: 25px; border: 0; margin: 0; padding: 0; }
table.node-tree tr td a                 { color: #000000; }
table.node-tree tr td .invisible        { color: #990000; }
table.node-tree tr td .access-rights    { color: #ff0000; }
/* with CSS3 you could do something like table.fixed td:nth-of-type(3) for the 3rd column */
/* @see http://stackoverflow.com/questions/4185814/fixed-table-cell-width */
table.node-tree tr td.title             { width: 75%; }
/*
if you float elements in a block, and use another block element inside this block,
the latter block will fill out the remaining space automatically
@see http://stackoverflow.com/questions/8252518/how-to-fill-100-of-remaing-width
*/
table.node-tree tr td.title img         { height: 25px; float: left; }
table.node-tree tr td.title a.page      { display: block; height: 100%; overflow: hidden; }
table.node-tree tr td.title span        { display: block; height: 100%; overflow: hidden; }

table.node-tree tr td.actions div       { display: block; float: right; } /* the div holding the action items */
table.node-tree tr td.actions img.empty { width: 19px; height: 25px; margin-right: 5px; float: left; }
table.node-tree tr td.actions           { width: 25%; }
table.node-tree tr td.actions a         { display: block; float: left; width: 19px; height: 19px; text-align: center; background-color: #888888; border-radius: 5px; margin: 3px 5px 3px 0; line-height: 17px; text-decoration: none; color: #ffffff; }
table.node-tree tr td.actions a.up      { background-image: url(/media/images/up.gif); }
table.node-tree tr td.actions a.down    { background-image: url(/media/images/down.gif); }
table.node-tree tr td.actions a:hover   { background-color: #ff7070; }

div.bar                                 { float: right; }
div.bar-top                             { margin-bottom: 10px; }
div.bar-bottom                          { margin-top: 10px; }
div.bar a.action                        { display: block; height: 21px; line-height: 20px; border-radius: 5px; background-color: #888888; text-decoration: none; padding: 0 10px; color: #ffffff; }
div.bar a.action:hover                  { background-color: #ff7070; }
Gewijzigd op 09/03/2018 16:15:25 door Thomas van den Heuvel
 
Ozzie PHP

Ozzie PHP

08/03/2018 01:30:58
Quote Anchor link
@Ariën:

>> De properties organiseer ik alfabetisch, de selectors weer niet.

Je bedoelt met properties de properties binnen een selector denk ik? Maar hoe organiseer je je selectors dan?

@Thomas

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
table.node-tree                         { table-layout: fixed; width: 100%; border: 0; border-collapse: collapse; margin: 0; padding: 0; color: #000000; }
table.node-tree tr                      { line-height: 25px; background-color: #ffffff; border-bottom: 1px solid #efefef; }
table.node-tree .level-0                { background-color: #b0b0b0; }
table.node-tree .level-1                { background-color: #c0c0c0; }
table.node-tree .level-2                { background-color: #d0d0d0; }
table.node-tree .level-3                { background-color: #e0e0e0; }
table.node-tree .level-4                { background-color: #f0f0f0; }
table.node-tree tr td                   { height: 25px; border: 0; margin: 0; padding: 0; }
table.node-tree tr td a                 { color: #000000; }
table.node-tree tr td .invisible        { color: #990000; }
table.node-tree tr td .access-rights    { color: #ff0000; }

Je begint met 'table.node-tree tr' en daaronder 'table.node-tree .level-0' en dan ga je even later weer verder met de td's via 'table.node-tree tr td'. Waarom doe je dat op die manier? En waarom staat .invisible boven .access-rights? Alfabetisch gezien zou je ze andersom verwachten. Ik bedoel dit (hoewel het wellicht zo overkomt) niet als kritiek, maar ik vraag me af waarom je die keuzes maakt, of heb je het gewoon min of meer willekeurig geplaatst?

In alle eerlijkheid, het maakt in de bovengenoemde situatie niet uit of .invisible of .access-rights als eerste komt ... maar dat houdt dan in dat je een soort van willekeur betracht (wat ik dus zelf ook wel eens doe). Ik zit me nu dus af te vragen of er niet een soort van handig 'systeem' is. Ik kan me dus voorstellen dat het handiger is om .access-rights boven .invisible te plaatsen zodat je de alfabetische volgorde aanhoudt, waardoor je iets makkelijker kunt terugvinden. Maar goed, ik heb dus zelf nog niet echt een duidelijk systeem daarin en daarom vraag ik me af of iemand anders dat wel heeft.
 
Thomas van den Heuvel

Thomas van den Heuvel

08/03/2018 02:34:39
Quote Anchor link
Mwa, het zijn allebei classes die een aparte opmaak hebben voor een cel, in die zin zijn ze (functioneel) gegroepeerd, om dat ook nog eens alfabetisch te doen is wel erg strict (ocd? :p). Moet natuurlijk wel een beetje praktisch blijven eh.
 
Ward van der Put
Moderator

Ward van der Put

08/03/2018 09:27:46
Quote Anchor link
Als je BEM (Block, Element, Modifier) gebruikt, is de logische volgorde:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.block {...}
.block__element {...}
.block__element--modifier {...}


Verder zet ik block-level elementen altijd vóór inline elementen, omdat inline elementen alleen voorkomen binnen block-level elementen. Daarnaast zet ik (generieke) class selectors altijd voor (unieke) id selectors.

Daarmee krijg je dan:

• block-level elementen: body, div, p, enzovoort
• inline elementen: a, span, em, enzovoort
• class selectors: .foo
• id selectors: #bar
 
Ozzie PHP

Ozzie PHP

08/03/2018 15:10:22
Quote Anchor link
@Thomas

>> Moet natuurlijk wel een beetje praktisch blijven eh.

Hahaha ... praktisch is 'in principe' dat de a boven de i staat, zodat je op alfabetische volgorde snel iets kunt terugvinden.

@Ward

Gebruik jij zelf BEM?

En groepeer jij dan ook css? Zet je bijv. alles wat in de footer staat bij elkaar? Of zet je bijv. alles (ongeacht waar het bij hoort) op alfabetische volgorde op basis van de classnaam of ID?
 
Ward van der Put
Moderator

Ward van der Put

08/03/2018 15:37:01
Quote Anchor link
In BEM krijg je bijna vanzelf een logische groepering van elementen binnen blokken. Een linklijst in een footer is bijvoorbeeld:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
.big-footer {
  ...
}

.big-footer__link-list {
  ...
}


Zonder BEM-klassen zou ik echter ongeveer dezelfde groepering en volgorde aanhouden:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
footer {
  ...
}

footer ul {
  ...
}

footer ul li {
  ...
}
 
Ozzie PHP

Ozzie PHP

08/03/2018 15:42:34
Quote Anchor link
En als ik het goed begrijp, dan gebruik je in BEM dus altijd classes?

Dus bijv. niet footer ul, maar footer__ul?

Gebruik je dan geen ID's?
 
Marthijn Buijs

Marthijn Buijs

08/03/2018 16:38:24
Quote Anchor link
@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.


Meer over BEM: https://css-tricks.com/bem-101/
 
Ozzie PHP

Ozzie PHP

08/03/2018 20:27:04
Quote Anchor link
@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?
 
Marthijn Buijs

Marthijn Buijs

09/03/2018 07:50:29
Quote Anchor link
@Ozzie PHP

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.
 
Ozzie PHP

Ozzie PHP

09/03/2018 13:59:33
Quote Anchor link
Oké. Gebruik jij zelf ook BEM?

Maar gebruik je dan niet meer 'header ul', maar '.header__ul'? En niet 'header a' maar '.header__a'? Is dat de bedoeling?
 
Marthijn Buijs

Marthijn Buijs

09/03/2018 16:13:56
Quote Anchor link
@Ozzie PHP

Voor mijn nieuwe website ga ik het ook gebruiken.

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.
 
Ozzie PHP

Ozzie PHP

09/03/2018 17:04:34
Quote Anchor link
Oké. Wat ik dan nog wel vreemd vind ... of beter gezegd me afvraag ... is of je universele elementen überhaupt nog wel een stijl geeft.

Kun je bijv. nog wel zeggen: a { tekst-decoration: none; }

Of is het dan de bedoeling dat je iedere link een class 'link' geeft en in je css .link { tekst-decoration: none; } plaatst?
 
Marthijn Buijs

Marthijn Buijs

09/03/2018 17:24:12
Quote Anchor link
Geen idee hoe dat precies zit.

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.
Gewijzigd op 09/03/2018 17:28:26 door Marthijn Buijs
 
Ozzie PHP

Ozzie PHP

09/03/2018 17:40:32
Quote Anchor link
Dat lijkt mij inderdaad ook de beste optie. Als ik tijd heb zal ik me eens gaan verdiepen in dat BEM.

Bedankt voor je input ... andere input is uiteraard nog steeds welkom.
 
Joakim Broden

Joakim Broden

12/03/2018 12:36:50
Quote Anchor link
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    - 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.

Toevoeging op 12/03/2018 12:38:38:

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.


Toevoeging op 12/03/2018 12:43:09:

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).
Gewijzigd op 12/03/2018 12:50:04 door Joakim Broden
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.