Kako ste organizovali izolaciju CSS u Vue komponentama u vašim projektima?

CSS u Vue komponentama može se izolovati na više načina:

1. Scoped CSS: Korišćenjem atributa scoped u <style> tagu komponente.

   <style scoped>
   .moj-komponent {
   /* Stilovi se primenjuju samo na elemente u ovoj komponenti */
   color: blue;
   }
   </style>
   

   Vue dodaje jedinstvene atribute elementima i odgovarajućim CSS pravilima, obezbeđujući izolaciju.

2. CSS Modules: Korišćenjem atributa module u <style> tagu.

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

   Ovo kreira lokalnu hash klasu, dostupnu putem $style objekta u šablonu i skriptu, izbegavajući konflikte imena.

3. CSS-in-JS biblioteke (npr. Styled Components, Emotion): Integracija eksternih biblioteka za pisanje stilova direktno u JavaScript.

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

   Ove biblioteke generišu jedinstvene klase i ubacuju stilove u head dokumenta, obezbeđujući izolaciju.

Izbor metode zavisi od zahteva projekta i preferencija tima. Scoped CSS je najjednostavniji za manje projekte, CSS Modules su pogodni za veće baze koda koje zahtevaju eksplicitno upravljanje stilovima, a CSS-in-JS pruža potpunu integraciju stilova i logike u JavaScript.