پارادایم ‫CSS Modules، پیشنهادی که نمی‌توانید آن را رد کنید

اجرا و کدنویسی ‫CSS با وجود سادگی و ساختار به ظاهر بدیهی، همواره یکی از چالش‌های جدی در پروژه‌های بزرگ وب است. اجرای کدهای CSS بدون هیچ پارادایم طراحی خاصی، همانند نوشتن کدهای اسپاگتی در بک‌اند و سایر نقاط پروژه است و نگهداری و توسعه پروژه در آینده را با چالش‌ مواجه می‌کند. بکارگیری پارادایم استاندارد علاوه بر سازماندهی موثر کدها، امکان مشارکت سایر افراد تیم را در فرآیند توسعه با سهولت بیشتری فراهم می‌کند.

پارادایم‌های استاندارد اجرای CSS

برای توسعه کدهای CSS با ساختار مناسب، پارادایم‌های مختلفی پیشنهاد و بکارگرفته شده‌اند که برخی از معروف‌ترین آن‌ها عبارتند از OOCSS، SMACSS، BEM، CSS Modules و Styled Components.

هر کدام از این پارادایم‌ها ایده‌ها، نظرات و نقاط قوت و ضعف مخصوص به خود را دارند اما همگی بر روی ایجاد ساختار استانداردی با قابلیت استفاده مجدد و همچنین ایجاد قوانینی جهت سهولت در کار تیمی اتفاق نظر دارند.

من تابه‌حال در طی پروژه‌های مختلف از پارادایم‌های OOCSS، SMACSS و BEM استفاده کرده‌ام و از میان این گزینه‌ها BEM ایده‌های توسعه‌یافته تری دارد؛ اما این آخرین پیشنهاد من نیست...

پارادایم BEM

این پارادایم با معرفی سه مفهوم Block، Element و Modifier مدلی را برای ساخت بلاک‌های معنایی در صفحه ارائه می‌کند. بلاک‌های BEM از نظر مفهومی کاملا مستقل از هم پیاده‌سازی می‌شوند اما در صورت پیاده‌سازی صحیح، امکان ترکیب شدن آن‌ها و ساخت بلاک‌های پیچیده‌تر نیز وجود دارد.

‫‫BEM پیشنهاد می‌کند که بلاک‌ها و حتی المان‌های کدنویسی شده، در فایل‌های مجزا و با ساختار مخصوصی نگهداری شوند تا علاوه بر سهولت در توسعه و نگهداری، امکان استفاده مجدد از آن‌ها در آینده و پروژه‌های دیگر میسر باشد.

در کنار مزایای زیاد مانند خوانایی بالای کد و قابلیت کار تیمی، این مدل مشکلات خاصی دارد که برخی از مهم‌ترین آن‌ها به شرح زیر است:

  • انتخاب نام مناسب و غیرتکراری برای کلاس‌ها بر عهده برنامه‌نویس است و این مساله کار توسعه را سخت می‌کند.
  • نام کلاس‌ها کمی طولانی است و برای اعمال چند کلاس به یک تگ HTML کاراکترهای زیادی تایپ می‌شود.
  • بخشی از منطق وارد دنیای CSS می‌شود و نام‌گذاری کلاس‌ها کاملا معنایی‌ست.
  • استفاده از این روش برای افراد مشکل است و پیاده‌سازی کد خوب نیاز به تلاش بیشتری دارد.
  • در صورت بزرگ شدن پروژه مدیریت بلاک‌ها و عدم تداخل آن‌ها نیاز به مدیریت جدی دارد.
  • افراد برای استفاده از این مدل باید با مفاهیم سه‌گانه آن به خوبی آشنا باشند و تسلط به این مفاهیم کمی زمانبر است.

با وجود ضعف‌های بالا، از نظر من باز هم پارادایم BEM برای پروژه‌های بزرگ مدل قابل استفاده‌ای است اما در حال حاضر روش‌های جدیدتر و مدرن‌تری مانند CSS Modules می‌تواند انتخاب مناسب‌تری باشد.

پارادایم CSS Modules

این پارادایم یکی از مدرن‌ترین روش‌های پیاده‌سازی CSS می‌باشد که در برنامه‌های مبتنی بر JS استفاده می‌شود. در مدل‌های جدید توسعه برنامه‌های JS، تمرکز بر ساخت اجزایی به نام کامپوننت است و ایده اصلی این پارادایم، نوشتن و نگهداری کدهای CSS در کنار کدهای JS استفاده کننده از آن می‌باشد.

با استفاده از این روش کامپوننت‌های تولید شده علاوه بر کپسوله‌سازی روال‌های منطقی در درون خود، دارای استایل مناسب هستند و در صورت بکارگیری آن‌ها در پروژه‌های دیگر، نیاز به بارگذاری فایل‌های CSS مرتبط با آن‌ها به صورت مجزا وجود ندارد.

مهم‌ترین مزایای این مدل به شرح ذیل است:

  • کپسوله شدن مناسب کدهای CSS و JS مرتبط با آن در یک ماژول و ایجاد قابلیت استفاده مجدد
  • نگهداری فایل CSS مرتبط با هر کامپوننت در کنار آن جهت نگهداری ساده‌تر کدها
  • رفع مشکل انتخاب نام منحصربفرد برای کامپوننت‌ها و ارائه راه‌حلی برای نامگذاری خودکار
  • تولید نام‌های کوتاه‌تر برای کلاس‌ها (به نسبت BEM)
  • ارائه قابلیت خارق‌العاده‌ای به نام compose برای ترکیب چندین کلاس CSS و ساختن کلاس‌های ترکیبی و کاربردی
  • امکان تعریف کلاس‌های CSS به صورت محلی و فقط برای کامپوننت مورد نظر
  • ارائه پیشنهاداتی جهت نامگذاری مناسب کلاس‌ها در کد و واگذاری تصمیم‌گیری نهایی به تیم توسعه دهنده
  • امکان ترکیب شدن و استفاده از سایر پارادایم‌ها در پیاده‌سازی CSS محلی برای هر کامپوننت
  • امکان یادگیری و استفاده سریع برای افراد به دلیل سینتکس بسیار ساده

شاید در ابتدای آشنایی با این پارادایم، مدل کدنویسی آن و به خصوص ترکیب فایل‌های CSS با JS خوشایند همه افراد نباشد اما نباید فراموش کنیم که در سال‌هایی نه چندان دور، ترکیب تگ‌های HTML با JS و تولید کدهای قالب با جاوااسکریپت اصلا معمول نبود و گاهی خطایی مهلک محسوب می‌شد اما امروزه در مدل‌های توسعه جدید و بواسطه ابزارهایی نظیر JSX، این امر کاملا پذیرفته شده و منطقی‌ست. مسلما این اتفاق با وجود دلایلی معقول و کارآمد برای CSS نیز قابل تکرار شدن است و دور از انتظار نیست.

نتیجه‌گیری

‫‫CSS Modules با توجه به سادگی استفاده، قابلیت تولید کدهایی با استفاده مجدد و همچنین ایجاد راهکاری برای توسعه CSS با همکاری تیم، گزینه مناسب‌تری نسبت به BEM برای پروژه‌های بزرگ است و استفاده از آن را به شدت توصیه می‌کنم.

همچنین روش پیشرفته Styled Components نیز وجود دارد که تمام مزایای CSS Modules را در خود داشته و به دلیل نوشتن مستقیم کدها و خصوصیات CSS در فایل‌های JS، ساختار متفاوتی دارد و نیازمند بررسی و تجربه بیشتری است.

با توجه به اینکه مطالب بیان شده حاصل تجربیات شخصی من است، همواره مشتاق شنیدن نظرات و تجربیات شما و انجام بحث در این باره هستم.

از توجه شما ممنونم :)