Omgaan met uitzonderingen in CUBE CSS

In het kort

Dit hoofdstuk verkent het concept van uitzonderingen binnen de CUBE CSS-methodologie. Uitzonderingen zijn vaak afwijkingen van de regels in een blok en hebben meestal te maken met veranderingen in de status. Het hoofdstuk bespreekt het gebruik van data-attributen voor uitzonderingen en verduidelijkt hoe uitzonderingen bijdragen aan een heldere stijl en het scheiden van uitzonderlijke situaties van standaard styling.

Binnen de CUBE CSS-methodologie vormen uitzonderingen een cruciaal onderdeel van de laatste laag. Een uitzondering betekent een afwijking van de regels die binnen een blok zijn vastgelegd, vaak in verband met statusveranderingen of unieke omstandigheden. Neem bijvoorbeeld een kaart als een blok. Standaard ziet een kaart er op een bepaalde manier uit, maar om een uitzondering toe te passen kun je een data-attribuut gebruiken:

<article class="card" data-state="reversed"></article>

Dit data-attribuut biedt een duidelijke haak voor zowel CSS als JavaScript. De uitzondering kun je vervolgens in CSS toepassen als volgt:

.card[data-state='reversed'] {
  display: flex;
  flex-direction: column-reverse;
}

Het resultaat is een visueel aangepaste kaart.

Waarom Data-Attributen?

Data-attributen worden in CUBE CSS gebruikt voor uitzonderingen, omdat uitzonderingen alleen in zeldzame of bijzondere situaties mogen voorkomen. Vaak worden uitzonderingen veroorzaakt door externe invloeden, zoals JavaScript. Door data-attributen te gebruiken als mechanisme voor uitzonderingen, profiteren zowel CSS als JavaScript hiervan. Het is ook zinvol om uitzonderingen te benaderen als een eindige toestandsmachine, waarbij deze attributen een duidelijke manier bieden om verschillende toestanden weer te geven.

Wat Moet een Uitzondering Doen?

• Een beknopte variatie op een blok bieden.
• Gebruik data-attributen om de uitzonderlijke status te representeren.

Wat Moet een Uitzondering Niet Doen?

• Een blok zo variëren dat het onherkenbaar wordt. In zulke gevallen is het vaak beter om een nieuw blok te maken.
• CSS-klassen gebruiken voor uitzonderingen.