Ako ste organizovali izoláciu CSS v Vue komponentách vo vašich projektoch?

CSS v komponentoch Vue možno izolovať viacerými spôsobmi:

1. Scoped CSS: Použitím atribútu scoped v tagu <style> komponentu.

   <style scoped>
   .moj-komponent {
   /* Štýly sa aplikujú iba na prvky v tomto komponente */
   color: blue;
   }
   </style>
   

   Vue pridáva jedinečné atribúty k prvkom a zodpovedajúcim pravidlám CSS, čím zabezpečuje izoláciu.

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

   <style module>
   .mojeTrida {
   color: green;
   }
   </style>
   
   <template>
   <div :class="$style.mojeTrida">
   Ahoj
   </div>
   </template>
   

   Toto vytvára lokálnu hashovanú triedu, dostupnú cez objekt $style v šablóne a skripte, čím sa vyhýba konfliktom mien.

3. CSS-in-JS knižnice (napríklad Styled Components, Emotion): Integrácia externých knižníc na písanie štýlov priamo v JavaScripte.

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

Tieto knižnice generujú jedinečné triedy a vkladajú štýly do hlavičky dokumentu, zabezpečujúc izoláciu.

Výber metódy závisí od požiadaviek projektu a preferencií tímu. Scoped CSS je najjednoduchšie pre malé projekty, CSS Modules sú vhodné pre väčšie kódové základy, ktoré vyžadujú explicitnú správu štýlov, a CSS-in-JS ponúka úplnú integráciu štýlov a logiky v JavaScripte.