Kuidas korraldasite CSS-isoleerimise Vue…

Ma kasutas mitmeid lähenemisviise sõltuvalt projekti mahust ja nõuetest:

Scoped CSS: Kõige levinum Vue-s. Stiilid rakenduvad ainult käesoleva komponendi elementidele, automaatselt lisades unikaalseid atribuute CSS valikutele ja DOM elementidele.

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

<style scoped>
/* See stiil kehtib ainult selle komponendi sees oleva div kohta */
.container {
  color: blue;
}
</style>

CSS Modules: Annab võimaluse luua lokaalseid CSS klasse, mis genereeritakse automaatselt unikaalsete nimedega. Imporditakse objektina JavaScriptis.

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

<style module>
/* 'container' klass saab unikaalse nime koostamise ajal */
.container {
  color: green;
}
</style>

CSS-in-JS (näiteks Emotion või Styled Components raamatukogud): Stiilid kirjutatakse otse JavaScript/TypeScripti. Tagab tugeva isolatsiooni ja dünaamilised stiilid, kuid võib suurendada paketi suurust ja keerukust.

// Näide pseudokoodina hüpoteetilise raamatukoguga
import styled from 'vue-styled-components';

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

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

Naming Conventions (BEM): Range reeglid klasside nimetamises, näiteks Block-Element-Modifier. Ei taga tehnilist isolatsiooni, kuid parandab loetavust ja prognoositavust.

Valik sõltus:

Meeskonna suurusest:
Komponentide keerukusest:
Stilide korduvkasutamise vajadusest:
Projekti standarditest:

Enamasti kasutasin scoped enamikus komponentides selle lihtsuse ja tõhususe tõttu. CSS Modules rakendasin keerulisemates olukordades, kus nõutakse rangemat lokaliseerimist või dünaamilisi klasse. CSS-in-JS harva, peamiselt projektides, kus seda juba kasutati või oli selge vajadus. Naming Conventions täiendavad alati teisi lähenemisviise.

Kuidas korraldasite CSS-isoleerimise Vue komponentides oma projektides?