Volgorde in CSS

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.).

@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".

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.

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:

@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; }

@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

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.

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.

Als je BEM (Block, Element, Modifier) gebruikt, is de logische volgorde:

.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

@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?

In BEM krijg je bijna vanzelf een logische groepering van elementen binnen blokken. Een linklijst in een footer is bijvoorbeeld:

.big-footer {
  ...
}

.big-footer__link-list {
  ...
}

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

footer {
  ...
}

footer ul {
  ...
}

footer ul li {
  ...
}

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?