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

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

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

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

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

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