Чӣ гуна шумо дар лоиҳаҳои худ изоляти CSS-ро дар компонентҳои Vue ташкил додед?

CSS-ро дар компонентҳои Vue метавонад ба чанд роҳ иҳота шавад:

1. CSS Scoped: Бо истифода аз хосияти scoped дар теги <style>-и компонент.

   <style scoped>
   .ман-компонент {
   /* Стилҳо танҳо ба унсурҳои дар ин компонент татбиқ мешаванд */
   color: blue;
   }
   </style>
   

   Vue ба унсурҳо ва қоидаҳои CSS мувофиқ хосиятҳои беназири илова мекунад, ки иҳота карданро таъмин мекунад.

2. CSS Modules: Бо истифода аз хосияти module дар теги <style>.

   <style module>
   .манКласс {
   color: green;
   }
   </style>
   
   <template>
   <div :class="$style.манКласс">
   Салом
   </div>
   </template>
   

   Ин як синфи локалӣ бо хештеги маҳаллӣ месозад, ки тавассути объекти $style дар шаблон ва скрипт дастрас аст, то зиддиятҳои номҳоро пешгирӣ кунад.

3. Китобхонаҳои CSS-in-JS (масалан, Styled Components, Emotion): Интегратсияи китобхонаҳои хориҷӣ барои навиштани услубҳо мустақиман дар JavaScript.

   import styled from 'vue-styled-components';
   
   const МанКомпонент = styled.div`
   color: purple;
   `;
   
   export default {
   components: { МанКомпонент }
   // ...
   }
   

Ин китобхонаҳо синфҳои беназирро тавлид мекунанд ва услубҳоро ба сарлавҳаи ҳуҷҷат ворид мекунанд, то иҳота карданро таъмин кунанд.

Тарзи интихоб аз талаботи лоиҳа ва афзалиятҳои гурӯҳ вобаста аст. CSS Scoped барои лоиҳаҳои хурд осонтарин аст, CSS Modules барои базаҳои коди калонтар, ки ниёз ба идоракунии равшан доранд, мувофиқ аст, ва CSS-in-JS пурра ба ҳамгироии услубҳо ва мантиқ дар JavaScript пешниҳод мекунад.