¿Cómo organizaste el aislamiento de CSS en los componentes Vue en tus proyectos?

CSS en componentes Vue se puede aislar de varias maneras:

1. CSS Scoped: Usando el atributo scoped en la etiqueta <style> del componente.

   <style scoped>
   .mi-componente {
   /* Los estilos solo se aplican a los elementos en este componente */
   color: blue;
   }
   </style>
   

   Vue añade atributos únicos a los elementos y reglas CSS correspondientes, asegurando el aislamiento.

2. CSS Modules: Usando el atributo module en la etiqueta <style>.

   <style module>
   .miClase {
   color: green;
   }
   </style>
   
   <template>
   <div :class="$style.miClase">
   Hola
   </div>
   </template>
   

   Esto crea una clase hash local, accesible a través del objeto $style en la plantilla y el script, evitando conflictos de nombres.

3. Bibliotecas CSS-in-JS (por ejemplo, Styled Components, Emotion): Integración de bibliotecas externas para escribir estilos directamente en JavaScript.

   import styled from 'vue-styled-components';
   
   const MiComponente = styled.div`
   color: purple;
   `;
   
   export default {
   components: { MiComponente }
   // ...
   }
   

   Estas bibliotecas generan clases únicas e insertan estilos en el head del documento, asegurando el aislamiento.

La elección del método depende de los requisitos del proyecto y las preferencias del equipo. CSS Scoped es más simple para proyectos pequeños, CSS Modules es conveniente para bases de código más grandes que requieren gestión explícita de estilos, y CSS-in-JS ofrece una integración completa de estilos y lógica en JavaScript.