Blokken in CUBE CSS: Meer dan de Basis

In het kort

Dit hoofdstuk verkent de rol van blokken binnen de CUBE CSS-methodologie. Blokken vormen skeletcomponenten of organisatorische structuren in webontwikkeling. Ze worden beschreven als specifieke elementen die in harmonie werken met de globale CSS, compositie- en utility-lagen. Het hoofdstuk benadrukt het belang van consistentie en flexibiliteit bij het werken met blokken.

In CUBE CSS staat een blok voor een skeletcomponent of organisatorische structuur. Dit lijkt op veelgebruikte UI-elementen zoals kaarten of knoppen. Wat blokken echter uniek maakt, is dat tegen de tijd dat je bij het blokniveau komt, het meeste stijlingswerk al is gedaan door de globale CSS-, compositie- en utility-lagen.

Geen Formele Elementen-Syntaxis

In tegenstelling tot andere methodologieën zoals BEM, vereist CUBE CSS geen formele elementen-syntaxis, zoals dubbele onderstreepjes (bijvoorbeeld .mijn-blok__mijn-element). Op het blokniveau is het meeste werk al uitgevoerd door de eerdere lagen. Dit stelt je in staat om selectors te gebruiken die direct HTML-elementen kunnen targeten, terwijl je toch consistentie behoudt.

Compositie Binnen Blokken

Het hoofdstuk raadt aan om de interne structuur van een blok met een compositielaag te benaderen. Dit helpt om flexibele, contextgevoelige contentgebieden binnen blokken te creëren. De compositielaag zorgt ervoor dat content zich effectief kan aanpassen aan verschillende varianten, in lijn met CUBE CSS’ focus op flexibele regels voor de browser.

Wat Moet een Blok Doen?

• Het werk voortzetten dat al is gedaan door de globale CSS-, compositie- en utility-lagen.
• Een set design tokens toepassen binnen een compacte groep.
• Een namespace of specificiteitsverhoging creëren om een specifieke context te beheersen.

Wat Moet een Blok Niet Doen?

• Meer dan een paar CSS-regels bevatten (maximaal 80-100 regels).
• Proberen om meerdere contextuele problemen binnen één bestand op te lossen, zoals het stijlen van een kaart en een knop samen.