Begrip: CSS Modules

Via CSS-modules is het mogelijk om scoped CSS toe te voegen aan een webapplicatie, zo worden name-collisions onmogelijk. De bundler zal de CSS-klassen die geïmporteerd wordt uit een CSS-module automatisch hernoemen naar een unieke naam, hierdoor kan je bijvoorbeeld in elke component gebruik maken van een klasse container zonder dat er een conflict ontstaat met andere componenten die ook een klasse container hebben.

Een CSS-modules bestand heeft de extensie .module.css. Vervolgens moet het CSS-bestand geïmporteerd worden als een JavaScript object, elk van de klassen in het CSS-bestand wordt een property van dit object. De klasse kan tenslotte toegekend worden aan een HTML-element via de className property.

import styles from './foo.module.css'

const fooElement = <div className={styles.bar}></div>

Notitie

Gebruik geen klassen die een underscore of andere speciale tekens bevatten, dit kan problemen geven bij het verwerken van de CSS-module.

Voor de klassenamen gelden dezelfde richtlijnen als voor variabelen.