Hogyan szervezte a CSS elszigeteltségét Vue…

A projekt méretétől és követelményektől függően több megközelítést alkalmaztam:

Scoped CSS: A Vue-ban ez a legelterjedtebb módszer. A stílusok csak az aktuális komponens elemeire vonatkoznak, az CSS-szelektorokhoz és a DOM-elemekhez automatikusan hozzáadott egyedi attribútumok segítségével.

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

<style scoped>
/* Ez a stílus csak az ebben a komponensben lévő container osztályú div-re vonatkozik */
.container {
  color: blue;
}
</style>

CSS Moduls: Lehetővé teszik helyi CSS osztályok létrehozását, amelyek automatikusan generálódnak egyedi nevekkel. JavaScript-ben objektumként importálhatók. Egyértelmű lokalizációt biztosítanak a stílusoknak.

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

<style module>
/* A 'container' osztály egyedi nevet kap a fordítás során */
.container {
  color: green;
}
</style>

CSS-in-JS (Emotion vagy Styled Components könyvtárakkal bővítmények segítségével): A stílusokat közvetlenül JavaScript/TypeScript-ben írják. Erős izolációt és dinamikus stílusokat biztosítanak, de növelhetik a csomag méretét és bonyolultságot adhatnak.

// Pseudokód példa egy feltételes könyvtárral
import styled from 'vue-styled-components'; // Importálási példa

const StyledDiv = styled.div` // Styled komponens létrehozása
  color: purple;
`;

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

Névkonvenciók (BEM): Szigorú névadási szabályok alkalmazása, mint például Blokk-Elem-Módosító. Nem biztosít technikai izolációt a keretrendszer által, de javítja az olvashatóságot és a kiszámíthatóságot.

A módszer kiválasztása a következőktől függött:

A csapat méretétől.
A komponensek összetettségétől.
A stílusok újrafelhasználhatóságának szükségességétől.
A projektben elfogadott szabványoktól.

Általában a scoped-ot használtam a legtöbb komponensnél a egyszerűsége és hatékonysága miatt. A CSS Modult összetettebb esetekben alkalmaztam, ahol szigorúbb lokalizáció vagy dinamikus osztályok voltak szükségesek. A CSS-in-JS ritkán, főként olyan projektekben, ahol már használták vagy egyértelmű szükség volt rá. A névadási konvenciók mindig kiegészítették a többi megközelítést.

Hogyan szervezte a CSS elszigeteltségét Vue komponensekben a projektjeiben?