مقدمه

تاحالا خیلی واستون پیش اومده که بخواید از حجم کدهای CSS خودتون کم کنید، خب minify یا فشرده کردن فایل های CSS کاملا مرسوم و شناخته شده است. اما خب ما برنامه نویس ها و بهتر بگم طراحای وب گاهی اوقات دوست داریم تا کدهای قشنگ تری رو بنویسیم، یعنی اینکه بیایم و از حجم کد خودمون کم کنیم و به خوانایی اون کمک کنیم.

در زبان CSS یک سری کوتاه نویسی یا Shorthand وجود داره که خیلی کار رو واسه یه طراح وب آسون میکنه، در این مقاله می تونید لیست کاملی از این کوتاه نویسی ها رو به همراه عبارات اصلی (کوتاه نشده) رو بخونید و باهاشون آشنا بشید.

چند نکته

قبل از اینکه ادامه مطلب رو بخونید باید به چند نکته بسیار مهم توجه کنید:

اگر در Shorthands ها یک Property رو ننویسید به صورت خودکار مقدار اون Property برابر با initial یا مقدار پیشفرض قرار می گیره، خب حالا یعنی چی؟ مثال پایین رو یه نگاه بنداز:
```
background-color: red;
background: url(images/bg.gif) no-repeat left top;
```
در خط اول ما اومدیم و رنگ پس زمینه رو قرمز تعیین کردیم و در خط دوم هم از عبارت کوتاه شده background استفاده کردیم ولی چون در خط دوم ما هیچ رنگی رو تعیین نکردیم و رنگ پیش فرض transparent قرار داره و خط دوم روی خط اول override میشه ما هیچ رنگ قرمزی رو نخواهیم دید!
پس وقتی که مقدار یک Property رو تعیین نکنید مقدار اون پیش فرض خواهد شد.
در عبارات کوتاه شده CSS ترتیب نوشتن اصلا مهم نیست، یعنی شما هرطوری بنویسی مرورگر میفهمه و اعمالش میکنه، یه نگاهی به مثال پایین بنداز:
```
background: url(images/bg.gif) no-repeat left top;

background: url(images/bg.gif) left top no-repeat;
```
الان خط 1 و 2 باهم تفاوتی ندارند!
نکته خیلی مهم تر: البته این مورد سوم یک سری استثناء هم داره و همیشه نمیتونیم همه چیز رو بهم ریخته بنویسیم و مرورگر واسمون درستش کنه :) با این موارد هم آشنا خواهید شد.

دیگه وقت یادگیریه

Border

/* Shorthand Syntax */
border: [border-width] [border-style] [border-color];

border-[left | right | top | bottom]: [border-width] [border-style] [border-color];

/* Longhand Syntax */
border-width: [ ];
border-style: [ ];
border-color: [ ];

/* Example */
border: 2px dashed #000;

Margin & Padding & Outline

/* Shorthand Syntax */
margin: [margin-top] [margin-right] [margin-bottom] [margin-left];

padding: [padding-top] [padding-right] [padding-bottom] [padding-left];

/* Longhand Syntax */
margin-top: [ ];
margin-right: [ ];
margin-bottom: [ ];
margin-left: [ ];

/* Example */
margin: 1em 1.5em 2em 2.5em;
padding: 1em 1.5em 2em 2.5em;

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

اگر برای margin یا padding یک عدد بنویسی، اون واسه هر چهار وجه حساب میشه:
```
/* same value, four sides */
margin: 4rem;
padding: 4rem;
```
اگر دوتا عدد بنویسی، عدد اول واسه جهت های بالا و پایین و عدد دوم واسه چپ راست و چپ:
```
margin: 1rem 2rem;
padding: 1rem 2rem;
```
اگر سه تا عدد بنویسی، عدد اول و سوم برای جهت های بالا و پایین و عدد دوم واسه راست و چپ:
```
margin: 1.3rem 2rem 1.1rem; /* top right&left bottom */
```

Font

/* Shorthand Syntax */
font: [font-weight] [font-style] [font-variant] [font-size/line-height] [font-family];

/* Longhand Syntax */
font-weight: [ ];
font-style: [ ];
font-variant: [ ];
font-size: [ ];
line-height: [ ];
font-family: [ ];

/* Example */
font: bold italic small-caps 1.5em/200% Georgia, "Times New Roman", serif;

در مورد Font باید چند نکته رو بگم:

اول اینکه ساختار نوشتن font-size/line-height دقیقا باید همینطور باشه یعنی ترتیب و اون / (اسلش) بینشون خیلی مهمه!
دوم اینکه ترتیب نوشتن بخش های مختلف فونت به جز دو مورد font-size/line-height و font-family مهم نیست، یعنی این دو موردی رو که گفتم رو باید همینطوری و به ترتیب باشه و بقیه موارد تقدم یا تاخر خاصی ندارند.
سوم اینکه اگر font-weight و font-style و font-varient رو ننویسید مقدار پیشفرض اون ها normal خواهد بود.

Background

/* Shorthand Syntax */
background: [background-image] [background-position/background-size] [background-repeat] [backgrond-clip] [backgrond-origin] [background-attachment] [background-color];

/* Longhand Syntax */
background-image: [ ];
background-position: [ ];
background-size: [ ];
background-repeat: [ ];
background-clip: [ ];
background-origin: [ ];
background-attachment: [ ];

/* Examples */
https://developer.mozilla.org/en-US/docs/Web/CSS/background

چند نکته در مورد Background:

در بک گراند ترتیب مهم نیست، می تونید هرطور خواستید بنویسید، اگر هم ننویسید که مقدار پیشفرض (initial) به جاش قرار میگیره، البته دوباره به اسلش بین background-position و background-size دقت کنید، این دوتا بهم چسبیده هستن و نباید جدا بشن!
اگر مقادیر background-clip و background-origin مثل هم هستن می تونید یکیشون رو بنویسید و واسه هر دوشون اعمال میشه اما اگر متفاوت باشن باید جدا جدا بنویسید.
حتما مثال های کامل این مورد رو از این لینک دنبال کنید تا بهتر این خلاصه نویسی رو درک کنید.

List

/* Shorthand Syntax */
list-style: [list-style-type] [list-style-position] [list-style-image];

/* Longhand Syntax */
list-style-type: [ ];
list-style-position: [ ];
list-style-image: [ ];

/* Example */
list-style: circle inside url(dot.svg);

توضیح خاصی واسه این مورد ندارم، فقط می تونید ترتیب رو رعایت نکنید!

Color

در مورد رنگ ها، اگر که رنگ رو با فرمت هگزادسیمال (همونی که با یه # شروع میشه) بنویسید می تونید اون رو خلاصه کنید، البته خلاصه کردنش یه شرط مهم داره، تو مثال پایین این شرط مهم بیان شده:

#ffffff   ->   #fff
#000000   ->   #000
#77bbaa   ->   #7ba

یعنی اینکه رنگ ها چون 6تا مقدار دارن باید دوتایی که کنار هم هستن شبیه همدیگه باشن تا بشه اون هارو خلاصه نویسی کرد.

حرف آخر

خب به پایان یه نوشته دیگه رسیدیم، البته این نوشته پایانی نداره چون ممکنه در آینده واسه CSS چیزای جدیدی اضافه بشه که الان تو این آموزش نیستند یا حتی مواردی رو که ازشون مطمئن نبودم و خلاصه نویسیشون رو نمیدونستم به این مجموعه اضافه کنم!

همچنین تمام تلاشم بر این بود که بتونم به بهترین نحو ممکن این موارد رو توضیح بدم تا اگر جایی بهش برخوردید یه مرجع به زبان فارسی واستون وجود داشته باشه :)

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

کوتاه نویسی در CSS