Jak jste ve svých projektech organizovali izolaci CSS…

Použil jsem různé přístupy v závislosti na rozsahu projektu a požadavcích:

Scoped CSS: Nejčastější metoda ve Vue. Styly se aplikují pouze na prvky aktuálního komponentu díky automatickému přidání unikátních atributů k CSS selektorům a DOM prvkům.

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

<style scoped>
/* Tento styl se aplikuje pouze na div s třídou container uvnitř tohoto komponentu */
.container {
  color: blue;
}
</style>

CSS Moduly: Umožňují vytvářet lokální CSS třídy, které jsou automaticky generovány s unikátními názvy. Importují se jako objekt v JavaScriptu. Zajišťují explicitní lokalizaci stylů.

<template>
  <div :class="$style.container">
    Ahoj, Moduly!
  </div>
</template>

<style module>
/* Třída 'container' bude mít při sestavení unikátní název */
.container {
  color: green;
}
</style>

CSS-in-JS (s knihovnami jako Emotion nebo Styled Components přes pluginy): Styly se píší přímo v JavaScriptu/TypeScriptu. Poskytují silnou izolaci a dynamické styly, ale mohou zvětšit velikost balíčku a přidat složitost.

// Příklad v pseudokódu s podmíněnou knihovnou
import styled from 'vue-styled-components'; // Příklad importu

const StyledDiv = styled.div` // Vytvoření styled komponenty
  color: purple;
`;

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

Názvoslovné konvence (BEM): Použití přísných pravidel pojmenování tříd, jako je Blok-Prvek-Modifikátor. Nezaručuje technickou izolaci prostřednictvím frameworku, ale zlepšuje čitelnost a předvídatelnost.

Volba metody závisela na:

Velikosti týmu.
Složitosti komponent.
Potřebě opětovného použití stylů.
Přijatých standardech v projektu.

Obvykle jsem používal scoped pro většinu komponent kvůli jeho jednoduchosti a efektivitě. CSS Moduly jsem používal u složitějších případů, kde byla potřeba přísnější lokalizace nebo dynamické třídy. CSS-in-JS zřídka, hlavně v projektech, kde již byl používán nebo byla jasná potřeba. Názvoslovné konvence vždy doplňovaly jiné přístupy.

Jak jste ve svých projektech organizovali izolaci CSS v komponentách Vue?