Ako ste organizovali izoláciu CSS v komponentoch Vue…

Używałem kilku podejść w zależności od skali projektu i wymagań:

Scoped CSS: Najbardziej powszechna 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ą na tworzenie lokalnych klas CSS, które są automatycznie generowane z unikalnymi nazwami. Importuje się je jako obiekt w JavaScript.

<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 wtyczki): 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 hipotetyczną biblioteką
import styled from 'vue-styled-components'; // Import

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

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

Naming Conventions (BEM): Używanie ścisłych konwencji nazewnictwa klas, takich jak Block-Element-Modifier. Nie zapewnia technicznej izolacji narzędziami 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 jego prostotę i skuteczność. CSS Modules stosowałem w bardziej złożonych przypadkach, gdy wymagana była ściślejsza lokalizacja lub klasy dynamiczne. CSS-in-JS rzadko, głównie w projektach, gdzie był już używany lub była wyraźna potrzeba. Naming Conventions zawsze uzupełniały inne podejścia.

Ako ste organizovali izoláciu CSS v komponentoch Vue vo svojich projektoch?