Kaip organizavote CSS izoliaciją Vue komponentuose…

Naudojau kelis požiūrius, priklausomai nuo projekto dydžio ir reikalavimų:

Scoped CSS: Dažniausias būdas Vue. Stiliai taikomi tik esamo komponento elementams, automatiškai pridedant unikalius atributus CSS selektoriams ir DOM elementams.

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

<style scoped>
/* Šis stilius taikys tik šio komponento viduje esantiems div elementams */
.container {
  color: blue;
}
</style>

CSS Modules: Leidžia kurti lokalinius CSS klases, kurios automatiškai generuojamos su unikaliais pavadinimais. Importuojamos kaip objektas į JavaScript.

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

<style module>
/* 'container' klasė turės unikalų pavadinimą surinkimo metu */
.container {
  color: green;
}
</style>

CSS-in-JS (su bibliotekomis kaip Emotion ar Styled Components): Stiliai rašomi tiesiogiai JavaScript/TypeScript. Užtikrina stiprią izoliaciją ir dinamiškus stilius, bet gali padidinti paketą ir sudėtingumą.

// Pavyzdys pseudokode su hipotetine biblioteka
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): Griežtos vardų schemos, tokios kaip Block-Element-Modifier. Nesuteikia techninės izoliacijos, bet gerina skaitomumą ir prognozuojamumą.

Pasirinkimas priklausė nuo:

Komandos dydžio:
Komponentų sudėtingumo:
Stilių pakartotinio naudojimo poreikio:
Projekto standartų:

Dažniausiai naudoju scoped daugumai komponentų dėl paprastumo ir efektyvumo. CSS Modules taikiau sudėtingesniais atvejais, kai reikėjo griežtesnės lokalizacijos ar dinamiškų klasių. CSS-in-JS retai, daugiausia projektuose, kur jau buvo naudojama arba reikėjo aiškiai. Naming Conventions visada papildydavo kitas požiūrius.

Kaip organizavote CSS izoliaciją Vue komponentuose savo projektuose?