زمانی که یک پروژه جدید را شروع می کنید همیشه به دنبال متدولوژی های جدیدی هستید که از طریق آنها بتوانید حجم کد های خود را کاهش دهید. تکنیک های بسیاری برای نوشتن کدهای css به صورت ماژولار وجود دارند مانند SMACSS و BEM و ... که این متدولوژی  ها همگی برای نوشتن css مبتنی بر اشیا هستند  و همانطور که شما می دانید راههای مختلفی برای نوشتن css وجود دارد.

در کنار همه این متدولوژی ها چیزی وجود دارد که به ما کمک می کند از تکرار دستورات در css جلوگیری کنیم که همان کلاس های کمکی هستند .

کلاس کمکی چیست ؟

کلاس هی کمکی به شما کمک می کنند تا از تکرار شدن دستورات در css خود جلوگیری کنید، با استفاده از کلاس های انتزاعی که درcss  خود تعریف میکنید می توانید بعد ها از آنها در کد های html خود استفاده کنید. هر کلاس کار خاصی را در css انجام میدهد که اندازه کدهایcss شما را کاهش  می دهد. کلاس های کمکی زیر نمونه ی ساده ای از کلاس های کمکی هستند که می توانیم از آنها در کدهای css خود استفاده کنیم :

.left        { float: left; }

.right       { float: right; }

.text-left   { text-align: left; }

.text-right  { text-align: right; }

.text-center { text-align: center; }

درcss بالا با استفاده از کلاس های کمکی دستوراتی را تعریف کردیم که می توانیم از آنها در تگ های html خود استفاده کنیم و از تکرار شدن این دستوارات برای قسمت های مختلف  در css جلوگیری می شود .برای مثال اگر می خواهید متن مورد نظر خود را چپ چین کنید کافی است از کلاسtext-left در کدهای خود استفاده کنید و یا در موارد مشابه برای المان های مختلف در صفحه می توانید از کلاسleft یا right  در کدهای خود استفاده کنید .

به عنوان مثال ساده میتوانید حالت زیر را در نظر بگیرید. می خوهیم divی داشته باشیم که در سمت چپ قرار بگیرد و محتیات داخلی ان نیز وسط چین باشد.

<div class="box">

</div>

و کد css ان نیز به شکل زیر می شود :

.box {

    float: left;

    text-align: center;

}

 ولی با استفاده از کلاس های کمکی می توانیم به راحتی به شکل زیر پیاده کنیم :

<div class="left text-center">

</div>

همانطور که می بینید کلاس .box  را از تکه بالا حذف کردیم و بجای ان از کلاس های کمکی که قبلا نوشته بودیم استفاده کردیم.

استفاده از سیستم گرید یکی از مثال های خوب استفاده از کلاس های کمکی است . در تکه کد زیر نمونه ای از سیستم گرید فریمورک  foundation  را مشاهدی می کنید:

<div class="row">

    <div class="small-2 large-4 columns"></div>

    <div class="small-4 large-4 columns"></div>

    <div class="small-6 large-4 columns"></div>

</div>

فریمورک foundation کلاس های کمکی بسیاری برای سیستم گرید خود دارد که می توانید از انها برای اندازه های مختلف استفاده کنید . این انعطاف پذیری به طراحان  این امکان را می دهد قالب های مورد نظر خود را برای وب سایت ها به راحتی و به سرعت  بدون نیاز به تغییر دادن کد های css شان پیاده سازی کنند. برای مثال :

 کلاس های Small-2و large-4 عرض المنت مورد نظر را بر اساس عرض صفحه نمایش تنظیم می کند .

-کلاس  .row عرض کانتینر مورد نظر برای را تنظیم می کند .

-کلاس .column  ، Padding و float را برای المان تنظیم می کند .

در ادامه برخی از کلاس های مفید را که می توانیم به پروژه خود اضافه کنیم اورده شده است . البته توجه کنید که این کلاس ها از متغیرهای Sass استفاده می کنند .

کلاس های کمکی برای margin و Padding:

margin و Padding معمولا متداول ترین دستورات در css ها هستند بنابراین اضافه کردن کلاس های کمکی که margin و Padding  را کنترل کند از تکرار شدن حجم زیادی از دستورات در css جلوگیری خواهد کرد .

ما با تعریف متغیری از طریق sass برای مقدار 1em شروع می کنیم و می توانیم این کلاس ها را برای اندازه های مختلف ایجاد کنیم .

 $base-space-unit: 1em;

// Top margin

.margin-top-none    { margin-top: 0; }

.margin-top-quarter { margin-top: $base-space-unit / 4; }

.margin-top-half    { margin-top: $base-space-unit / 2; }

.margin-top-one     { margin-top: $base-space-unit; }

.margin-top-two     { margin-top: $base-space-unit * 2; }

// Top padding

.padding-top-none    { padding-top: 0; }

.padding-top-quarter { padding-top: $base-space-unit / 4; }

.padding-top-half    { padding-top: $base-space-unit / 2; }

.padding-top-one     { padding-top: $base-space-unit; }

.padding-top-two     { padding-top: $base-space-unit * 2; }

همچنین می توانیم اسم کلاس ها مانند زیر برای راحتی استفاده به صورت خلاصه تعریف کنیم :

.m0  { margin:        0 }

.mt0 { margin-top:    0 }

.mr0 { margin-right:  0 }

.mb0 { margin-bottom: 0 }

.ml0 { margin-left:   0 }