CSS: cascade

De CSS Cascade is het systeem dat bepaalt welke stijlregels toegepast worden wanneer meerdere regels hetzelfde element beïnvloeden. Het werkt volgens een specifieke volgorde van prioriteiten:

1. Origin en Importance

/* User agent styles (browser defaults) - laagste prioriteit */
p { margin: 16px 0; }

/* Author styles (jouw CSS) - normale prioriteit */
p { margin: 20px 0; }

/* User styles (gebruiker instellingen) - hoge prioriteit */
p { margin: 24px 0 !important; }

/* !important author styles - hoogste prioriteit */
p { margin: 10px 0 !important; }

2. Specificity (specificiteit)

CSS berekent een score voor elke selector:

/* Specificity: 0,0,0,1 (1 element) */
p { color: blue; }

/* Specificity: 0,0,1,0 (1 class) */
.text { color: red; }

/* Specificity: 0,1,0,0 (1 ID) */
#main { color: green; }

/* Specificity: 0,0,1,1 (1 class + 1 element) */
p.text { color: purple; }

/* Winner: #main (highest specificity) */

Specificity berekening:

• Inline styles: 1,0,0,0
• IDs: 0,1,0,0
• Classes/attributes/pseudo-classes: 0,0,1,0
• Elements/pseudo-elements: 0,0,0,1

3. Source Order (volgorde)

Bij gelijke specificity wint de laatst gedefinieerde regel:

.button { background: blue; }
.button { background: red; }  /* Deze wint */

<!-- Ook belangrijk bij externe stylesheets -->
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="theme.css"> <!-- theme.css overschrijft base.css -->

Praktisch Voorbeeld

<p id="intro" class="highlight">Hello world</p>

/* 1. Element selector - 0,0,0,1 */
p { color: black; }

/* 2. Class selector - 0,0,1,0 */
.highlight { color: blue; }

/* 3. ID selector - 0,1,0,0 */
#intro { color: red; }

/* 4. More specific - 0,1,1,0 */
#intro.highlight { color: green; }

/* 5. !important overrides all */
p { color: purple !important; }

/* Result: purple (because of !important) */
/* Without !important: green (highest specificity) */

Best Practices

• Vermijd !important - maakt cascade management moeilijk
• Gebruik logische specificity - begin met lage specificity, verhoog waar nodig
• Organiseer CSS logisch - van algemeen naar specifiek
• Gebruik CSS variables voor consistentie zonder specificity problemen

De cascade zorgt voor de "C" in CSS en maakt het mogelijk om flexibele, overerfbare stylesystemen te bouwen!