Hoe hebt u de isolatie van CSS georganiseerd in…

Ik heb verschillende benaderingen gebruikt, afhankelijk van de omvang van het project en de vereisten:

Scoped CSS: De meest gebruikte methode in Vue. Stijlen worden alleen toegepast op de elementen van de huidige component dankzij de automatische toevoeging van unieke attributen aan CSS-selectors en DOM-elementen.

<template>
  <div class="container">
    Hallo, Vue!
  </div>
</template>

<style scoped>
/* Deze stijl wordt alleen toegepast op de div met klasse container binnen deze component */
.container {
  color: blue;
}
</style>

CSS Modules: Stellen je in staat om lokale CSS-klassen te maken die automatisch worden gegenereerd met unieke namen. Ze worden geïmporteerd als een object in JavaScript. Ze zorgen voor expliciete lokalisatie van stijlen.

<template>
  <div :class="$style.container">
    Hallo, Modules!
  </div>
</template>

<style module>
/* De klasse 'container' krijgt een unieke naam tijdens de build */
.container {
  color: green;
}
</style>

CSS-in-JS (met bibliotheken zoals Emotion of Styled Components via plugins): Stijlen worden direct in JavaScript/TypeScript geschreven. Ze bieden sterke isolatie en dynamische stijlen, maar kunnen de bundelgrootte vergroten en complexiteit toevoegen.

// Voorbeeld in pseudocode met een voorwaardelijke bibliotheek
import styled from 'vue-styled-components'; // Import voorbeeld

const StyledDiv = styled.div` // Styled component maken
  color: purple;
`;

export default {
  components: {
    StyledDiv,
  },
  template: `<styled-div>Hallo, CSS-in-JS!</styled-div>`,
};

Nomenclatuurconventies (BEM): Gebruik van strikte naamgevingsconventies zoals Block-Element-Modifier. Biedt geen technische isolatie via het framework, maar verbetert de leesbaarheid en voorspelbaarheid.

De keuze van methode hing af van:

Teamgrootte.
Complexiteit van componenten.
Noodzaak tot hergebruik van stijlen.
Aangenomen standaarden in het project.

Meestal gebruikte ik scoped voor de meeste componenten vanwege de eenvoud en efficiëntie. CSS Modules werden toegepast in complexere gevallen waar strengere lokalisatie of dynamische klassen nodig waren. CSS-in-JS zelden, vooral in projecten waar het al werd gebruikt of er een expliciete behoefte was. Nomenclatuurconventies vulden altijd andere benaderingen aan.

Hoe hebt u de isolatie van CSS georganiseerd in Vue-componenten in uw projecten?