Kā jūs organizējāt CSS izolāciju Vue komponentos…

Es izmantoju vairākus pieejas atkarībā no projekta mēroga un prasībām:

Scoped CSS: Visbiežāk izmantotā Vue metode. Stili tiek piemēroti tikai pašreizējās komponentes elementiem, automātiski pievienojot unikālas atribūtus CSS selektoriem un DOM elementiem.

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

<style scoped>
/* Šis stils attieksies tikai uz šī komponenta iekšpusē esošo div */
.container {
  color: blue;
}
</style>

CSS Modules: Ļauj izveidot lokālas CSS klases, kas automātiski ģenerējas ar unikāliem nosaukumiem. Importē kā objektu JavaScript.

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

<style module>
/* 'container' klasei tiks piešķirts unikāls nosaukums būvniecības laikā */
.container {
  color: green;
}
</style>

CSS-in-JS (ar bibliotēkām kā Emotion vai Styled Components): Stili rakstīti tieši JavaScript/TypeScript. Nodrošina spēcīgu izolāciju un dinamiskus stilus, bet var palielināt bundļa izmēru un sarežģītību.

// Pseido-koda piemērs ar hipotētisku bibliotēku
import styled from 'vue-styled-components';

const StyledDiv = styled.div`
  color: purple;
`;

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

Naming Conventions (BEM): Stingras nosaukumu konvencijas, piemēram, Block-Element-Modifier. Nesniedz tehnisku izolāciju, bet uzlabo lasāmību un paredzamību.

Izvēle bija atkarīga no:

Komandas lieluma:
Komponentu sarežģītības:
Stilų atkārtotas lietošanas nepieciešamības:
Lielāka standarta ievērošanas:

Visbiežāk izmantoju scoped lielākajai daļai komponentu, jo tas ir vienkāršs un efektīvs. CSS Modules izmantoju sarežģītākos gadījumos, kad nepieciešama stingrāka lokalizācija vai dinamiskas klases. CSS-in-JS reti, galvenokārt projektos, kuros tas jau bija izmantots vai bija skaidra nepieciešamība. Naming Conventions vienmēr papildināja citas pieejas.

Kā jūs organizējāt CSS izolāciju Vue komponentos savos projektos?