Ինչպե՞ս եք կազմակերպել CSS-ի մեկուսացումը Vue կոմպոնենտներում ձեր նախագծերում:

Ես օգտագործել եմ մի քանի մոտեցում՝ կախված նախագծի չափից և պահանջներից:

1. Scoped CSS: Ամենատարածված մեթոդ Vue-ում: Սթայլերը կիրառվում են միայն ընթացիկ կոմպոնենտի տարրերին՝ շնորհիվ CSS սելեկտորների և DOM տարրերի ավտոմատ ավելացված եզակի հատկանիշների:

   <template>
     <div class="container">
       Բարև, Vue!
     </div>
   </template>
   
   <style scoped>
   /* Այս ոճը կկիրառվի միայն այս կոմպոնենտի ներսում գտնվող div-ի վրա */
   .container {
     color: blue;
   }
   </style>
   

2. CSS Modules: Позволяют создавать локальные CSS-классы, которые автоматически генерируются с уникальными именами. Импортируются как объект в JavaScript.

   <template>
     <div :class="$style.container">
       Բարև, Modules!
     </div>
   </template>
   
   <style module>
   /* Կլաս 'container'-ը կունենա յուրահատուկ անուն՝ կառուցման ժամանակ */
   .container {
     color: green;
   }
   </style>
   

3. CSS-in-JS (կամ նմանատիպ գրադարաններով՝ Emotion կամ Styled Components): Սթայլերը գրվում են անմիջապես JavaScript/TypeScript-ում: Գաղտնիացնում են և դինամիկ սթայլեր ապահովում, բայց կարող են մեծացնել բանդլի չափը և ավելացնել բարդություն:

   // Պսևդո-կոդ օրինակ՝ հիպոթետիկ գրադարանի հետ
   import styled from 'vue-styled-components';
   
   const StyledDiv = styled.div`
     color: purple;
   `;
   
   export default {
     components: {
       StyledDiv,
     },
     template: `<styled-div>Բարև, CSS-in-JS!</styled-div>`,
   };
   
   

4. Naming Conventions (BEM): Խիստ կանոններ՝ Block-Element-Modifier: Չի ապահովում տեխնիկական մեկուսացում, բայց բարելավում է կարդալելիությունը և կանխատեսելիությունը:

Ընտրությունը կախված է:

• Թիմի չափից:
• Կոմպոնենտների բարդությունից:
• Սթայլերի վերօգտագործման անհրաժեշտությունից:
• Լուծարման ստանդարտներից:

Ամենից հաճախ օգտագործում էի scoped՝ մեծ մասի կոմպոնենտների համար, քանի որ դա պարզ և արդյունավետ էր: CSS Modules օգտագործում էի ավելի բարդ դեպքերում՝ երբ անհրաժեշտ էր ավելի խիստ տեղայնացում կամ դինամիկ դասեր: CSS-in-JS հազվադեպ, հիմնականում այն նախագծերում, որտեղ արդեն օգտագործվում էր կամ կար հստակ անհրաժեշտություն: Naming Conventions միշտ լրացնում էին այլ մոտեցումները: