Comment avez-vous organisé l'isolation CSS dans les…

J'ai utilisé plusieurs approches, en fonction de l'ampleur du projet et des exigences:

CSS Scoped : La méthode la plus courante dans Vue. Les styles s'appliquent uniquement aux éléments du composant actuel grâce à l'ajout automatique d'attributs uniques aux sélecteurs CSS et aux éléments DOM.

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

<style scoped>
/* Ce style ne s'appliquera qu'au div avec la classe container dans ce composant */
.container {
  color: blue;
}
</style>

Modules CSS : Permettent de créer des classes CSS locales, qui sont générées automatiquement avec des noms uniques. Importées comme un objet en JavaScript. Assurent une localisation explicite des styles.

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

<style module>
/* La classe 'container' aura un nom unique lors de la compilation */
.container {
  color: green;
}
</style>

CSS-in-JS (avec des bibliothèques comme Emotion ou Styled Components via des plugins) : Les styles sont écrits directement en JavaScript/TypeScript. Offrent une forte isolation et des styles dynamiques, mais peuvent augmenter la taille du bundle et ajouter de la complexité.

// Exemple en pseudocode avec une bibliothèque conditionnelle
import styled from 'vue-styled-components'; // Exemple d'importation

const StyledDiv = styled.div` // Création d'un composant styled
  color: purple;
`;

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

Conventions de nommage (BEM) : Utilisation de conventions strictes pour nommer les classes, telles que Bloc-Élément-Modifier. Ne fournit pas d'isolation technique par le biais du framework, mais améliore la lisibilité et la prévisibilité.

Le choix de la méthode dépendait de:

La taille de l'équipe.
La complexité des composants.
La nécessité de réutiliser les styles.
Les standards adoptés dans le projet.

En général, j'utilisais scoped pour la majorité des composants en raison de sa simplicité et de son efficacité. CSS Modules était utilisé pour des cas plus complexes nécessitant une localisation plus stricte ou des classes dynamiques. CSS-in-JS rarement, principalement dans des projets où il était déjà utilisé ou où il y avait un besoin explicite. Les conventions de nommage complétaient toujours d'autres approches.

Comment avez-vous organisé l'isolation CSS dans les composants Vue de vos projets?