7. Relevante CSS-kennis

7.1. De cascade, specificiteit (specificity) en overerving (inheritance)

Het is natuurlijk mogelijk dezelfde property meermaals in te stellen met een declaration. De regels van CSS bepalen welke waarde uiteindelijk voor de property ingesteld wordt.

  • Cascading: een botsende declaration overschrijft declarations die eerder in de stylesheet kwamen (van boven naar beneden).
  • Specificity: een set regels bepaalt vervolgens welke botsende declaration van kracht is. Dat kan je grofweg afleiden aan hoe gericht/specifiek de rule is waaronder de declaration valt. Een rule die heel specifiek voor een bepaald element geldt overschrijft algemenere rules. Specificiteit wordt berekend aan de hand van vooral de selector van de rule, en wordt uitgedrukt in een getal met vier posities (een soort duizendtal dus).
  • Inheritance: als een element al bepaalde CSS-instelling heeft, geeft het meestal die instellingen door aan elementen ‘binnen’ hemzelf (zijn kinderen).

Lees de bespreking op MDN in Cascade and inheritance.

Voor de berekening van specificiteit is Specifishity een leuke en overzichtelijke bron.

⚠️ Met !important kan je een declaration alles laten overschrijven, ongeacht specificiteit. Dit is een slechte oplossing voor onverwachte CSS-instellingen die je wilt bijwerken. Beter onderneem je het volgende:

  • Zoek grondig uit hoe de cascade loopt bij jouw stylesheets en inline styles.
  • Verwijder dubbele, overlappende en overbodige declarations en rules (ook tussen verschillende stylesheets!).
  • Gebruik de DevTools om na te gaan waar een bepaalde property zoal ingesteld wordt.

7.2. Shorthand vs. longhand properties

CSS kent properties waarmee je meerdere properties tegelijk kan instellen. Dit wordt in detail behandeld op MDN in Shorthand properties.

Zo kan je:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

korter schrijven als:

/* top, right, bottom, left */
margin: 10px 5px 10px 5px;

of zelfs:

/* top, bottom, right, left. */
margin: 10px 5px;

Shorthands gebruiken heeft als voordeel dat je stylesheets overzichtelijker worden. Wel moet je erop letten dat een shorthand alle waarden die je niet opgeeft overschrijft met de standaardinstellingen. Stel, als een shorthand vier longhand properties kan instellen maar je gaf maar drie waardes op, dan wordt de vierde property weer teruggezet, zelfs als je die vierde property vooraf apart had ingesteld met een longhand!

Je kan hyperlinks in verschillende staten vormgeven:

  • Standaard (:link): onbezochte hyperlink.
  • Bezocht (:visited).
  • Hover (:hover): overlapt door de cursor, maar nog niet aangeklikt/-gedrukt
  • Actief (:active): net aangeklikt/-gedrukt (kortstondig).

Hanteer altijd deze LVHA-volgorde van boven naar beneden in je stylesheets.