یکی دیگر از قواعد اصلی در طراحی سایت قاعده مقیاس پذیری است. بدین معنا که کد باید به گونه‌ای نوشته شده باشد که به راحتی قابل  گسترش و توسعه در آینده باشد.

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

ایجاد CSS استایل پذیر اغلب نیاز به استفاده از ابزاری مثل LESS و Sass و Mixin و یا توابع و… دارد. در مثالی که در مقالات قبلی آوردیم، چون همه پرچم‌های callout خواست یکسانی از رنگ‌ها دارند، می‌توانیم یک LESS Mixin ایجاد کنیم که استایل برای هر کدام از پرچم‌ها بسازد بدون اینکه کد تکراری داشته باشیم.

@angle: 170; 
.callout { 
  &.qty-left { 
    .callout-generator(@color-deals, @color-white, @angle);
  } 
  &.qty-sold { 
    .callout-generator(@color-white, @color-deals, @angle, 2px solid @color-deals); 
  } 
  &.qty-out { 
    .callout-generator(@color-grey, darken(@color-grey, 10%), @angle); 
  }
}

ما در اینجا یک LESS Mixin به اسم callout-generator ایجاد کردیم که مقادیری از قبیل رنگ پس زمینه، رنگ متن، اندازه گوشه خط دور(border) را می‌گیرد.

در آینده وقتی نیاز به دیزاین مشابه باشد، به راحتی می‌توان از این LESS Mixin استفاده کرد.

برای ایجاد یک طراحی سایت مقیاس پذیر، چگونگی پیش‌بینی کردن تغییرات متداول را باید یاد بگیرید و اطمینان حاصل کنید که کدی که نوشتید برای آن تغییرات آمادگی دارد یا خیر. از خودتان بپرسید:

• کدام قسمت از این آلمان ممکن است تغییر کند؟
• چگونه می‌توانید کدی بنویسید که در آینده تغییرات را راحت بتوان اعمال کرد؟