Campus Design System

Appearance

Utility Klassen in CUBE CSS ​

In het kort

Dit hoofdstuk verkent het concept van utility klassen binnen de CUBE CSS-methodologie. Utility klassen zijn CSS-klassen die efficiënt één specifieke taak uitvoeren. Ze zijn ontworpen om naadloos samen te werken met design tokens en zo een onderhoudbaar systeem voor styling te creëren.

Binnen CUBE CSS is een utility een CSS-klasse die één taak uitzonderlijk goed uitvoert. Deze klassen definiëren meestal slechts één CSS-eigenschap, zoals een achtergrondkleur, of een compacte set verwante eigenschappen.

css
.wrapper {
  margin-inline: auto;
  padding-inline: 1rem;
  max-width: 60rem;
}

Het basisprincipe van utility klassen in CUBE CSS is om een enkele taak efficiënt te volbrengen, wat eenvoud en herbruikbaarheid bevordert.

CSS Gebaseerd op Tokens ​

CUBE CSS integreert moeiteloos met design systemen via de utility laag, die samenwerkt met design tokens. Design tokens definiëren stijleigenschappen los van de CSS-codebase. Om design tokens in lijn te brengen met de CUBE CSS-methodologie, is het aan te raden utility klassen te genereren.

Bijvoorbeeld, als je design tokens hebt gedefinieerd in een JSON-bestand zoals:

json
{
  "color": {
    "primary": "var(--cds-palette-primary-60)",
    "on-primary": "var(--cds-palette-primary-10)",
    "surface": "var(--cds-palette-secondary-100)",
    "on-surface": "var(--cds-palette-neutral-10)"
  },
  "palette": {
    "primary": {
      "10": "#330021",
      "60": "#ff00ff"
    },
    "surface": {
      "10": "#222222",
      "100": "#ffffff"
    }
  }
}

Je kunt een tool gebruiken om utility klassen te genereren die elk token als een CSS-eigenschap weergeven. Zo zou het eruit kunnen zien:

css
.primary {
  background: var(--cds-color-primary);
  color: var(--cds-color-on-primary);
}
.surface {
  background: var(--cds-color-surface);
  color: var(--cds-color-on-surface);
}

Deze gegenereerde klassen kunnen eenvoudig worden toegepast op HTML-elementen, zoals hieronder:

html
<article class="[ surface ]">
  <div class="[ heading ][ primary ]">Titel</div>
</article>

Met deze aanpak definieer je stijlelementen één keer en pas je ze consistent toe in het hele project, wat in lijn is met het principe dat design tokens als één bron van waarheid fungeren.

Wat Moeten Utilities Doen? ​

  • Eén CSS-eigenschap of een compacte groep verwante eigenschappen toepassen om herbruikbare helpers te creëren.
  • Design tokens uitbreiden om één enkele bron van waarheid te behouden.
  • Herhaling uit de CSS halen en toepassen in de HTML.

Wat Moeten Utilities Niet Doen? ​

  • Een grote groep niet-verwante CSS-eigenschappen definiëren; in dat geval is het misschien beter om een blok te maken.
  • Gebruikt worden als een specificity hack, bijvoorbeeld door alle eigenschappen met !important in te stellen, aangezien dit op lange termijn voor problemen kan zorgen in de codebase.