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

استانداردسازی در طراحی سایت یا اپلیکیشن به معنای انتشار قوانینی است که تمامی موارد همچون سایزها، سطوح هدینگ ها(h1,h2,h3…)، طول و عرض‌ها، دیزاین، استایل المان‌ها و … را کنترل می‌کند. به عبارتی استانداردسازی بدین معناست که قانون گذاری برای مقادیر مشترک، در قسمتی، ذخیره شده باشد.

در css ساده، شما باید از قواعد یک استایل بیرونی تبعیت کنید، ولی استفاده از یک پروسسور مثل LESS یا Sass بهترین گزینه است، چرا که می‎توان این قواعد و قوانین را در variables یا mixinها تعریف کرد.

پس زمانیکه که یک پروژه طراحی سایت به شما تحویل داده می شود، ابتدا به یکسان سازی و استاندارد کردن اندازه و متغیرها بپردازید. مثلا فاصله بین تمام المان‌ها را یکی یا بر حسب یک متغیر تغییر دهید، به این صورت تمام طرح یکدست و هم تراز می‌شود.

.product-cards {
  li {
    display: inline-block;
    padding: @gutter-width/4;
    color: @text-color;
    text-decoration: none;
    background-color: @color-white;
    .border;
    margin-bottom: @gutter-width/2;
    margin-right: @gutter-width/2;
  }
}
 
.product-status {
  font-size: @font-size-small;
  color: @grey-darker;
  font-weight: @font-weight-bold;
  margin-bottom: @gutter-width/4;
}

مثال بالا نمونه‌ای استاندارد شده با Less و mixin ها است و به همین دلیل است که هیچ مقدار عددی‌ای دیده نمی‌شود و همگی به صورت متغیر در قسمت variableها تعریف شده‌اند. برای چک استاندارد، css را بررسی کنید که آیا هیچ مقدار و واحدی (pixels,HEX colors,em, numerical…) در کد وجود دارد؟

• آیا این مقادیر از استانداردها یا مقادیر موجود استفاده می کند؟
• آیا واحدی دوباره مورد استفاده قرار می‌گیرد که ارزش متغیر جدید ساختن را داشته باشد؟ (مثلا زمانیکه از یک background با یک رنگ و opacity برای بار دوم استفاده می‌کنید نیاز به ساخت متغیر جدید دارید)
• آیا واحدی وجود دارد که بر حسب محاسباتی از یک متغیر دیگر باشد؟ (مثلا این روش مناسبی برای رنگ است که به جای نوشتن کد هگز رنگ، یک رنگ اصلی را تعریف و مابقی را بر حسب آن 10% تیره تر یا روشن تر کنید)

به طور کلی تجربه می‌گوید که ماژول‌های css کامپایل نشده، به طور متمرکز از variableها و mixinها استفاده می کنند و شما مقدار یا واحدی (pixels,HEX colors,em, numerical…) را داخل کد نمی‌بینید.