Como organizou o isolamento CSS nos componentes Vue…

Utilizei várias abordagens, dependendo da escala do projeto e dos requisitos:

CSS Scoped: O método mais comum no Vue. Os estilos aplicam-se apenas aos elementos do componente atual graças à adição automática de atributos únicos aos seletores CSS e elementos DOM.

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

<style scoped>
/* Este estilo aplica-se apenas ao div com classe container dentro deste componente */
.container {
  color: blue;
}
</style>

Módulos CSS: Permitem criar classes CSS locais, que são geradas automaticamente com nomes únicos. São importados como um objeto em JavaScript. Garantem uma localização explícita dos estilos.

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

<style module>
/* A classe 'container' terá um nome único na compilação */
.container {
  color: green;
}
</style>

CSS-in-JS (com bibliotecas como Emotion ou Styled Components através de plugins): Os estilos são escritos diretamente em JavaScript/TypeScript. Oferecem forte isolamento e estilos dinâmicos, mas podem aumentar o tamanho do bundle e adicionar complexidade.

// Exemplo em pseudocódigo com uma biblioteca condicional
import styled from 'vue-styled-components'; // Exemplo de importação

const StyledDiv = styled.div` // Criação de componente styled
  color: purple;
`;

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

Convenções de nomenclatura (BEM): Uso de convenções estritas para nomear classes, como Bloco-Elemento-Modificador. Não fornece isolamento técnico pelo framework, mas melhora a legibilidade e a previsibilidade.

A escolha do método dependia de:

Tamanho da equipa.
Complexidade dos componentes.
Necessidade de reutilização de estilos.
Padrões adotados no projeto.

Geralmente, utilizava scoped na maioria dos componentes devido à sua simplicidade e eficiência. CSS Modules aplicava-se em casos mais complexos, onde era necessária uma localização mais rigorosa ou classes dinâmicas. CSS-in-JS raramente, principalmente em projetos onde já era utilizado ou havia uma necessidade explícita. As convenções de nomenclatura sempre complementavam outras abordagens.

Como organizou o isolamento CSS nos componentes Vue nos seus projetos?