ممکنه تا به حال کدهای CSS زیادی دیده باشید که خیلی کوتاه و مفید نوشته شدند و شاید گاهی هم ازشون سر در نیاورده باشید. اکثر طراحان بعد از پشت سر گذاشتن مراحل اولیه یادگیری کدنویسی و بعد از تسلط نسبی، سعی میکنند به کارشون سرعت بیشتری بدهند و کدهای کوتاه‌تر و تمیزتری بنویسند. به این علت خلاصه نویسی دستورات اهمیت پیدا میکنه. استفاده از کدهای خلاصه، کد شما رو ساده‌تر، کوتاه‌تر و تمیزتر میکنه. [از نظر من] نگهداری این نوع کد ساده‌تر هست و اگر مسلط باشید حتی خوندنش هم سریعتر خواهد بود!
Margin/Padding
margin و padding برای هر عنصر از چهار جهت قابل تعریف هستند و صورت پیش فرض مقادیر به این شکل هست:
margin-top: 1px;
margin-right: 3px;
margin-bottom: 6px;
margin-left: 8px;
همین مقادیر رو میشه به این شکل نوشت:
margin: 1px 3px 6px 8px;
که در واقع ترتیب به صورت ساعتگرد از بالا هست. تمام صورتهای کوتاه‌نویسی margin و padding به این شکل هست:
margin: top right bottom left;
margin: top right/left bottom;
margin: top/bottom right/left;
مورد دوم حالتی هست که سه مقدار برای margin نوشته شده. که اولی برای بالا، دومی برای چپ و راست و سومی برای پایین هست و مورد سوم هم حالتی هست که دو مقدار نوشته میشه و اولی برای بالا و پایین و دومی برای راست و چپ هست. در نهایت هم اگر تنها یک مقدار نوشته بشه به هر چهار جهت اعمال میشه.
Background
background مقادیر و حالات زیادی میتونه داشته باشه. به طور مثال:
background-color: #f00;
background-image: url(background.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
که صورت کوتاه شده به شکل زیر هست:
background: color image repeat attachment position;
که حالت خلاصه مثال بالا به این شکل میشه:
background: #f00 url(background.png) no-repeat fixed 0 0;
Border
border خصوصیتهای نسبتا کمی داره: رنگ، قطر و نوع. اما میتونه حالات زیادی داشته باشه. ساده‌ترین حالت زمانی هست که به هر چهار طرف کادر border یکسانی داشته باشه:
border: 1px solid #000;
مقدار اول قطر (width) حاشیه، مقدار دوم نوع حاشیه (مثل dashed یا double) و مقدار سوم رنگ حاشیه رو مشخص میکنه.
اگر لازم باشه borderهای متفاوتی برای جهت‌های مختلف یک کادر داشته باشید میتونید از border-top، border-bottom، border-right یا border-left استفاده کنید. که باز هم طرز نوشتن مقادیرش به شکل بالا هست: قطر نوع رنگ.
خلاصه‌نویسی فقط به معنی استفاده از صورت خلاصه دستورات نیست. با کمی خلاقیت میشه کدهای کوتاه‌تر و بهتری داشت. مثلا اگر شما برای کادری border در نظر گرفتید و میخواید فقط حاشیه سمت راستی کادر قطر بیشتری داشته باشه میتونید به این شکل کد بنویسید:
border: 1px solid #fafafa;
border-right-width: 3px;
Font
font هم یکی از موارد نسبتا پر کاربرد هست. Font خصوصیاتی مانند نوع، اندازه، توپری، کجی و ارتفاع خط داره:
font-family: tahoma, verdana, sans-serif;
font-size: 12px;
font-weight: normal;
font-style: italic;
line-height: 120%;
که صورت خلاصه به این شکل است:
font: style weight size/line-height family;
font: italic normal 12px/120% tahoma, verdana, sans-serif;
دقت کنید که فقط در صورت تعریف line-height لازم هست از / (اسلش) به همراه size استفاده کنید و اگر فقط یک مقدار (پیکسلی یا درصدی) باشه به عنوان font-size در نظر گرفته میشه.
نکات اضافی
صورت خلاصه نویسی که برای margin گفته شد تقریبا برای تمامی مواردی که با ابعاد (dimension) سر و کار داره صدق میکنه. مثلا برای border-width.
همونطور که در مورد border با مثالی اشاره کردم، خلاصه نویسی با کمی خلاقیت نتیجه خوبی میده، شما میتونید با استفاده از ترکیبی از صورت خلاصه و گسترده دستورات در مجموع کد کوتاه‌تری داشته باشید.
اگر فکر میکنید موارد و مقادیری لازم هست به دفعات توسط فردی ناآشنا با طراحی وب تغییر بکنه، بهتره از صورت خلاصه استفاده نکنید یا با یک comment ترتیب و شکل نوشتن مقادیر رو توضیح بدید.
مطلب مرتبط: http://weblog.alvanweb.com/2005/08/17/css-shorthand
امیدوارم این مطلب کوتاه و نه چندان مهم، هم به شما برای خوندن و نوشتن بهتر کدهای CSS کمک کنه و هم کمی وبلاگ گریزی من رو بهتر کنه! 
