Come hai organizzato l'isolamento CSS nei componenti…

Ho utilizzato diversi approcci, a seconda delle dimensioni del progetto e dei requisiti:

CSS Scoped: Il metodo più comune in Vue. Gli stili vengono applicati solo agli elementi del componente corrente grazie all'aggiunta automatica di attributi unici ai selettori CSS e agli elementi DOM.

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

<style scoped>
/* Questo stile si applica solo al div con classe container all'interno di questo componente */
.container {
  color: blue;
}
</style>

Moduli CSS: Permettono di creare classi CSS locali, generate automaticamente con nomi unici. Vengono importati come oggetti in JavaScript. Garantisco una localizzazione esplicita degli stili.

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

<style module>
/* La classe 'container' avrà un nome unico durante la compilazione */
.container {
  color: green;
}
</style>

CSS-in-JS (con librerie come Emotion o Styled Components tramite plugin): Gli stili vengono scritti direttamente in JavaScript/TypeScript. Offrono un forte isolamento e stili dinamici, ma possono aumentare la dimensione del bundle e aggiungere complessità.

// Esempio in pseudocodice con una libreria condizionale
import styled from 'vue-styled-components'; // Importazione di esempio

const StyledDiv = styled.div` // Creazione di un componente styled
  color: purple;
`;

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

Convenzioni di denominazione (BEM): Uso di convenzioni rigorose per denominare le classi, come Blocco-Elemento-Modificatore. Non garantisce isolamento tecnico tramite il framework, ma migliora la leggibilità e la prevedibilità.

La scelta del metodo dipendeva da:

Dimensione del team.
Complessità dei componenti.
Necessità di riutilizzo degli stili.
Standard adottati nel progetto.

In genere, usavo scoped per la maggior parte dei componenti per la sua semplicità ed efficienza. CSS Modules venivano usati in casi più complessi, dove era richiesta una localizzazione più rigorosa o classi dinamiche. CSS-in-JS raramente, principalmente in progetti già utilizzati o con una necessità esplicita. Le convenzioni di denominazione completavano sempre altri approcci.

Come hai organizzato l'isolamento CSS nei componenti Vue nei tuoi progetti?