¿Cómo organizaste el aislamiento de CSS en los…

Utilicé varios enfoques, dependiendo del tamaño del proyecto y los requisitos:

CSS Scoped: El método más común en Vue. Los estilos se aplican solo a los elementos del componente actual gracias a la adición automática de atributos únicos a los selectores CSS y a los elementos DOM.

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

<style scoped>
/* Este estilo solo se aplicará al div con clase container dentro de este componente */
.container {
  color: blue;
}
</style>

Módulos CSS: Permiten crear clases CSS locales, que se generan automáticamente con nombres únicos. Se importan como un objeto en JavaScript. Garantizan una localización explícita de estilos.

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

<style module>
/* La clase 'container' tendrá un nombre único en la compilación */
.container {
  color: green;
}
</style>

CSS-in-JS (con bibliotecas como Emotion o Styled Components a través de plugins): Los estilos se escriben directamente en JavaScript/TypeScript. Ofrecen un aislamiento fuerte y estilos dinámicos, pero pueden aumentar el tamaño del bundle y agregar complejidad.

// Ejemplo en pseudocódigo con una biblioteca condicional
import styled from 'vue-styled-components'; // Ejemplo de importación

const StyledDiv = styled.div` // Creación de un componente styled
  color: purple;
`;

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

Convenciones de nomenclatura (BEM): Uso de convenciones estrictas para nombrar clases, como Bloque-Elemento-Modificador. No proporciona aislamiento técnico mediante el framework, pero mejora la legibilidad y la previsibilidad.

La elección del método dependía de:

El tamaño del equipo.
La complejidad de los componentes.
La necesidad de reutilización de estilos.
Los estándares adoptados en el proyecto.

Por lo general, usaba scoped para la mayoría de los componentes por su simplicidad y eficiencia. CSS Modules se aplicaba en casos más complejos donde se requería una localización más estricta o clases dinámicas. CSS-in-JS rara vez, principalmente en proyectos donde ya se utilizaba o había una necesidad explícita. Las convenciones de nomenclatura siempre complementaban otros enfoques.

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