قاعده ماژول‌سازی (Modular) در طراحی سایت

قاعده ماژول‌سازی (Modular) در طراحی سایت

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

۱۴ شهریور ۱۴۰۰

این قاعده بدین معناست که در طراحی سایت المان‌های مشترک به صورت ماژول ساخته شوند تا در صورت نیاز در قسمت‌های مختلف قابل استفاده باشند.

این بخش با بخش جداسازی انتزاعی مشترکات زیادی دارد، ولی مرزی بین این دو وجود دارد که باعث تفاوت آن‌ها می‌شود که حائز اهمیت است و آن این است که وقتی المان‌های سراسری (عمومی) پایه‌ای نیاز به جداسازی از محتوا دارند‌‌‌، محتواهای جدا نیز باید قابل استفاده مجدد باشند.

مثلا اگر شما در حال پیاده‌سازی یک کارت محصولات روزانه از مثالی که در مقاله جداسازی انتزاعی آورده شد، هستید؛ به جای ایجاد HTML و CSS مختص محصولات روزانه به طور مثال با اسم کلاس daily-deal-product؛ یک کلاس جامع‌تر با اسم product-card ایجاد کنید که تمام کلاس‌های جداسازی شده را شامل شود که بتوان از آن در جایی به غیر از بخش محصولات روزانه نیز استفاده کرد. این موضوع در سه قسمت جداگانه، که هر کدام استایل‌های خود را می‌گیرند، نتیجه می‌دهد:

  • CSS پایه: این یک فریم ورک کلی و اساسی است که شامل مقدارهای پیش‌فرض برای تایپوگرافی، فاصله‌ها، رنگ‌ها و ... است.
  • اجزای CSS: این‌ها بخش‌های جداسازی شده طرح هستند، که ساختار را با توجه به طرح می‌سازند ولی در جای دیگری نیز قابل استفاده اند.
  • اجزای المان پدر: این‌ها همان المان‌هایی مثل محصولات روزانه هستند که شامل استایل‌ها و جزئیات مختص مثلاً محصولات روزانه هستند.

پیاده سازی به صورت ماژول سازی شده در ساختار، مثل تصویر بالا که هر المان بایداستایل‌هایی برای فاصله دهی و قرارگیری بگیرد؛ ولی بیشتر CSSها از فریم ورک گرفته شده‌اند.


برخی از پروژه‌ها
فروش آنلاین
گالری گاندی

گالری نقزه گاندی با هدف ترویج صنایع دستی منحصر به فرد نقره در ایران و سایر کشورها به ارائه این طیف از محصولات به علاقه مندان می پردازد.

صنعت رستوران
کیت لاین

کیت لاین بزرگ ترین فروشگاه اینترنتی تخصصی در صنعت رستوران و فست فود ایران است که طیف وسیعی از محصولات مرتبط با این صنعت را در اختیار مشتریان خود قرار می دهد.

پروژه‌های بیشتر