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

CSS v Vue komponentách lze izolovat několika způsoby:

1. Scoped CSS: Použitím atributu scoped v tagu <style> komponenty.

   <style scoped>
   .moje-komponenta {
   /* Styly se aplikují pouze na prvky v této komponentě */
   color: blue;
   }
   </style>
   

   Vue přidává unikátní atributy k prvkům a odpovídajícím pravidlům CSS, čímž zajišťuje izolaci.

2. CSS Modules: Použitím atributu module v tagu <style>.

   <style module>
   .máTřída {
   color: green;
   }
   </style>
   
   <template>
   <div :class="$style.máTřída">
   Ahoj
   </div>
   </template>
   

   Tímto se vytvoří lokální hashovaná třída, dostupná přes objekt $style v šabloně a skriptu, čímž se předchází konfliktům jmen.

3. CSS-in-JS knihovny (například Styled Components, Emotion): Integrace externích knihoven pro psaní stylů přímo v JavaScriptu.

   import styled from 'vue-styled-components';
   
   const MůjKomponent = styled.div`
   color: purple;
   `;
   
   export default {
   components: { MůjKomponent }
   // ...
   }
   

   Tyto knihovny generují unikátní třídy a vkládají styly do hlavičky dokumentu, čímž zajišťují izolaci.

Volba metody závisí na požadavcích projektu a preferencích týmu. Scoped CSS je nejjednodušší pro malé projekty, CSS Modules jsou vhodné pro větší kódové základy, kde je potřeba explicitní správa stylů, a CSS-in-JS nabízí plnou integraci stylů a logiky v JavaScriptu.