Wie haben Sie die CSS-Isolierung in Vue-Komponenten…

Ich habe verschiedene Ansätze verwendet, abhängig von der Größe des Projekts und den Anforderungen:

Scoped CSS: Die gebräuchlichste Methode in Vue. Stile werden nur auf die Elemente des aktuellen Komponenten angewendet, dank automatischer Hinzufügung einzigartiger Attribute zu CSS-Selektoren und DOM-Elementen.

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

<style scoped>
/* Dieser Stil gilt nur für das div mit der Klasse container innerhalb dieser Komponente */
.container {
  color: blue;
}
</style>

CSS-Module: Ermöglichen die Erstellung lokaler CSS-Klassen, die automatisch mit einzigartigen Namen generiert werden. Sie werden als Objekt in JavaScript importiert. Gewährleisten eine explizite Lokalisierung von Stilen.

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

<style module>
/* Die Klasse 'container' wird bei der Erstellung einen einzigartigen Namen haben */
.container {
  color: green;
}
</style>

CSS-in-JS (mit Bibliotheken wie Emotion oder Styled Components über Plugins): Stile werden direkt in JavaScript/TypeScript geschrieben. Bieten starke Isolierung und dynamische Stile, können aber die Bundle-Größe erhöhen und Komplexität hinzufügen.

// Beispiel in Pseudocode mit einer bedingten Bibliothek
import styled from 'vue-styled-components'; // Beispielimport

const StyledDiv = styled.div` // Erstellen eines styled-Komponenten
  color: purple;
`;

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

Benennungskonventionen (BEM): Verwendung strenger Namenskonventionen wie Block-Element-Modifikator. Bietet keine technische Isolierung durch das Framework, verbessert aber Lesbarkeit und Vorhersehbarkeit.

Die Wahl der Methode hing ab von:

Teamgröße.
Komplexität der Komponenten.
Bedarf an Wiederverwendung von Stilen.
Akzeptierte Standards im Projekt.

In der Regel verwendete ich scoped für die meisten Komponenten wegen seiner Einfachheit und Effizienz. CSS-Module wurden für komplexere Fälle eingesetzt, bei denen eine strengere Lokalisierung oder dynamische Klassen erforderlich waren. CSS-in-JS wurde selten verwendet, hauptsächlich in Projekten, in denen es bereits genutzt wurde oder eine explizite Notwendigkeit bestand. Benennungskonventionen ergänzten stets andere Ansätze.

Wie haben Sie die CSS-Isolierung in Vue-Komponenten in Ihren Projekten organisiert?