Jak zorganizowałeś izolację CSS w komponentach Vue w…

Używałem różnych podejść, w zależności od skali projektu i wymagań:

Scoped CSS: Najczęściej stosowana metoda w Vue. Style są stosowane tylko do elementów bieżącego komponentu dzięki automatycznemu dodawaniu unikalnych atrybutów do selektorów CSS i elementów DOM.

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

<style scoped>
/* Ten styl będzie dotyczył tylko div z klasą container w tym komponencie */
.container {
  color: blue;
}
</style>

CSS Modules: Pozwalają tworzyć lokalne klasy CSS, które są automatycznie generowane z unikalnymi nazwami. Importuje się je jako obiekt w JavaScript. Zapewniają jawne lokalizowanie stylów.

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

<style module>
/* Klasa 'container' będzie miała unikalną nazwę podczas kompilacji */
.container {
  color: green;
}
</style>

CSS-in-JS (z bibliotekami takimi jak Emotion lub Styled Components przez pluginy): Style są pisane bezpośrednio w JavaScript/TypeScript. Zapewniają silną izolację i style dynamiczne, ale mogą zwiększyć rozmiar pakietu i dodać złożoność.

// Przykład w pseudokodzie z warunkową biblioteką
import styled from 'vue-styled-components'; // Przykład importu

const StyledDiv = styled.div` // Tworzenie stylowanego komponentu
  color: purple;
`;

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

Konwencje nazewnictwa (BEM): Użycie ścisłych konwencji nazewnictwa klas, takich jak Blok-Element-Modyfikator. Nie zapewnia technicznej izolacji za pomocą frameworka, ale poprawia czytelność i przewidywalność.

Wybór metody zależał od:

Wielkości zespołu.
Złożoności komponentów.
Potrzeby ponownego użycia stylów.
Przyjętych standardów w projekcie.

Najczęściej używałem scoped dla większości komponentów ze względu na prostotę i efektywność. CSS Modules stosowałem w bardziej złożonych przypadkach, gdy wymagana była bardziej rygorystyczna lokalizacja lub klasy dynamiczne. CSS-in-JS rzadko, głównie w projektach, gdzie już był używany lub istniała wyraźna potrzeba. Konwencje nazewnictwa zawsze uzupełniały inne podejścia.

Jak zorganizowałeś izolację CSS w komponentach Vue w swoich projektach?