گاهی اوقات دستورات سی اس اسی که می نویسیم آنقدر زیاد و حجیم می شود که روی سرعت لود شدن سایت تاثیر منفی می گذارد و نظارت و ویراش کردن آن نیز کمی دشوار می شود.

حالا اگر ما بیاییم از این روش های خلاصه نویسی استفاده کنیم، تا حدودی می توانیم از این حجیم شدن و شلوغ پلوغ شدن دستورات بکاهیم.

در ادامه ی این پست، فرض ِ من بر این است که شما می دانید سی اس اس دقیقا چیست و کمی آن را بلد هستید :)

برای شروع، یکی از دستورات ساده را انتخاب می کنم:

/*sample 1*/
body {
background: #ccc url(/images/bg.jpg) right fixed no-repeat;
}

این یک نمونه از دستور خلاصه شده است. یعنی ما همه ی مقدارهای لازم را به ترتیب به خاصیت background دادیم. حالا اگر بخواهیم همین دستورها را به صورت معمولی و مفصل بنویسیم، نتیجه می شود 5 خط کد:

/*sample 2*/
body {
background-color: #ccc;
background-image: url(/images/bg.jpg);
background-position: right;
background-attachment: fixed;
background-repeat: no-repeat;
}

مورد بعدی کمی مهمتر است. خاصیت های margin و padding را در نظر بگیرید. این دو خاصیت معمولا در لا به لای دستورات، زیاد استفاده می شوند. حالا فرض کنید اگر مقدارهای این دو را به صورت مفصل و کامل بنویسید، چقدر به حجم دستوراتتان اضافه می شود!

/*sample 3*/
#content {
margin: 20px 10px 15px 10px;
padding: 10px 5px 10px 5px;
}

این، شکل خلاصه شده ی این دستورات است. درواقع به ترتیب، چهار جهت ِ top، right، bottom و left را در یک خط، مقدار دادیم. برای اینکه ترتیب جهت ها را درک کنید، به مثال زیر توجه کنید:

/*sample 4*/
margin: top / right / botoom / left;

دو روش دیگر برای خلاصه کردن مقدار های padding و margin وجود دارد که اولی به صورت زیر است:

/*sample 5*/
margin: 20px 10px;

این یعنی دو جهت ِ top و botoom دارای مقدار 20px هستند و دو جهت ِ right و left دارای مقدار 10px. متوجه شدید دیگر؟

آخرین روش خلاصه نویسی برای خاصیت های padding و margin به این شکل می باشد:

/*sample 6*/
margin: 20px;

به این معنی که هر چهار جهت ِ top، right، bottom و left دارای مقدار 20px می باشند.
تمامی موارد گفته شده ی بالا در مورد خاصیت padding نیز صدق می کند.

خب، قضیه ی padding و margin دیگر تمام شد. حالا یک روش نسبتا متفاوت را با هم امتحان می کنیم :)

اکثر اوقات پیش می آید که بعضی از عناصری که در صفحه ایجاد می کنیم، یک سری خاصیت های مشترک دارند. مثلا رنگ زمینه ی آنها مشکی است و یا اندازه ی فونت آن ها 12px است و…

در اینجور مواقع ما می توانیم یک بار همه ی این خاصیت ها را برای این گونه عناصر بنویسیم و از تکرار کردن آن ها بپرهیزیم. چگونه؟

فرض می کنیم که ما دو عنصر داریم که قرار هست خاصیت هایشان یکسان و مشترک باشد. عنصر اول، تگ p و عنصر دوم، تگ h3 است. حالا خیلی زیبا و قشنگ، یک بار خاصیت های موردنظر را می نویسیم برای هردو عنصر. اینگونه:

/*sample 7*/
p, h3 {
background: #ccc;
color: #333;
font: 12px Tahoma;
margin: 10px;
padding: 5px;
}

در اینجا ما با گذاشتن یک (,) بین دو عنصر، این منظور را رساندیم که دستورات نوشته شده هم برای تگ p درنظر گرفته شود، هم برای تگ h3. این را هم بگویم که از این روش می توانید برای بی نهایت عنصر استفاده کنید و محدودیتی از این بابت نیست.

موارد اصلی و مهم همین هایی بود که ذکر کردم و فقط دو مورد جزئی می ماند که برای کامل شدن بحث، به آن ها هم اشاره می کنم.

اولی در رابطه با خلاصه کردن کد رنگ است که از 6 کاراکتر به 3 کاراکتر تبدیل می شود.

/*sample 8*/
background-color: #cccccc;

در این مثال ما یک رنگ خاکستری ِ روشن تولید کردیم. همانطور که می بینید از 6 کاراکتر c استفاده کردم. حالا اگر به جای 6 کاراکتر c فقط از 3 کاراکتر استفاده کنم، باز همان رنگ خاکستری روشن تولید می شود.

/*sample 9*/
background-color: #ccc;

برای مورد آخر هم به خلاصه نویسی خاصیت فونت می پردازم. مثال زیر، خود گویای همه چیز است:

/*sample 10*/
#content {
font: bold 12px Tahoma;
}

ترتیب ِ قراردادن ِ مقدارها را باید رعایت کنید حتما:

/*sample 11*/
#content {
font: font-style and font-weight / font-size / font-family;
}

خب، بحث مان دیگر تمام شد. چیزی که قابل توجه است این است که من برای تمامی خاصیت هایی که می توان آن ها را خلاصه نویسی کرد اینجا مثال نیاورم. مثل خاصیت border که دیگر این ها را می گذارم به عهده ی خودتان. با کمی حوصله به خرج دادن و الگو برداری از همین مثال هایی که زدم، می توانید برای خاصیت های دیگر هم خلاصه نویسی کنید.

اگر سوالی بود، در خدمت هستم :)