قاعده جداسازی انتزاعی از قواعد مهم دیگر در طراحی سایت است که در مقاله اصول مهم طراحی سایت به صورت مختصر معرفی شد و در این مقاله به صورت مفصل بیان می‌شود.
این قاعده بدین معناست که المان‌های پایه و اساسی باید از هسته اصلی به صورت جداگانه ساخته شوند.
من نام این بخش را در اصل چسبیده شده (frameworked) می گذارم چون به جز اینکه شما در حال ایجاد پروژه‌تان هستید، باید بر روی سیستم طراحی‌ای کار کنید که در قسمت‌های دیگ نیز قابل استفاده باشد. در این بخش به ایجاد قسمت‌ها و المان‌های معمول‌تری می‌پردازیم که در قسمت‌های دیگر یا در آینده پروژه، قابل استفاده باشد.
اینگونه فکر کنید: اگر CSS شما قرار باشد به عنوان یک فریم ورک متن باز مثل Bootstrap ارائه شود، چگونه المان‌ها را جدا می کردید؟ چگونه استایل‌های متفاوت ولی یک دست ایجاد می‌کردید؟ حتی اگر از بوت استرپ هم استفاده می کنید، پروژه شما المان‌هایی دارد که خود بوت استرپ ندارد.
نکته مهم در این بخش این است که به هر المان جامع‌تر نگاه کنیم. وقتی یک المان را به طور کلی نبینید و به صورت خاص به آن نگاه کنید، آن را به چند بخش تقسیم و به هر بخش استایل مختص پروژه‌ای که درگیر آن هستید را می‌دهید.
برای بررسی قاعده جداسازی پروژه‌ها (همچون طراحی سایت)، می‌توانید از سوالات زیر کمک بگیرید:
• چگونه این المان را بسازم در حالیکه می‌دانم برای استفاده در جای دیگر قرار است مورد استفاده قرار گیرد؟
• چگونه المان را به چند بخش تقسیم کنم که در همه اپلیکیشن‌ها ارزشمند باشد؟
این ارزش در المان‌های وب و اپلیکیشن های ماژولار ساده‌تر است، چون ویجت ها احتمالا قبلا از همین راه جداسازی شده اند. اما به طور کلی قاعده جداسازی بر روی تفکرتان در زندگی تاثیر خواهد گذاشت!
