اگر با Vue.js کار کرده باشید احتمالا روش های Style دهی به المنت هارو میدونید،اما یه تکنیک Style دهی به نام Css module در Vue.js وجود داره که کمتر کسی بهش توجه کرده
یکی از رایج ترین تکنیک های style دهی استفاده از Scoped هستش
خب حالا این Scoped چه کاری برامون انجام میده که باعث میشه کلاس های ما به تداخل نخورن !؟
همونطور که توی عکس بالا میبینید ما از کلاس svg-icon استفاده کردیم،اما خود Vue اومده برای کلاسمون یک Data attribute تعریف کرده همراه با روش Hash کردن مخصوص خودش،پس درواقع با این کار از تداخل کلاس ها با هم جلوگیری کرده
برای استفاده از این قابلیت باید از module را به عنوان attribute به style بدهید
همونطور که از تصویر مشخصه،ساختار کلاس ها مثل قبل هست(یک قابلیت اضافه شده که جلوتر میگم) و روش فراخوانی کلاس ها با آبجکت style$ صورت میگیره
خب،درسته که در ظاهر تفاوت چندانی با حالت عادی نداره اما هنگام رندرینگ بهینگی هایی رو شامل میشه
یکی از بهینگی هایی که در ظاهر میتونیم ببینیم تغییر نام گذاری کلاس ها موقع رندر شدن هست
دیگه خبری از Data attribute نیست و به جاش نام کلاسمون تشکیل شده از (نام کامپوننت + نام کلاس + هش)
یکی دیگه از قابلیت های Css module امکان export کردن متغیر های css هست که در بالا یک نمونه اش رو میبینید
در کل بخاطر بهینگی های جدید Vue در روایات توصیه فراوانی به استفاده از Css Module ها شده
و جالبه که بدونید آقای بن هنگ(Ben Hong) Css Module ها رو به عنوان Best Practice در Vue معرفی میکنه
