یکی از روش‌های بهینه‌سازی کدنویسی در CSS استفاده از خصوصیات کوتاه شده (Shorthand Properties) است.

این ویژگی‌ها امکان می‌دهند که چندین ویژگی مرتبط را در یک خط ترکیب کنیم و حجم کدهای CSS را کاهش دهیم، که منجر به خوانایی بهتر، نگهداری آسان‌تر و عملکرد سریع‌تر سایت می‌شود.

۱. مزایای استفاده از خصوصیات کوتاه شده در CSS

✅ کاهش حجم کد → تعداد خطوط CSS کمتر می‌شود و فایل سبک‌تر خواهد شد.
✅ بهبود خوانایی و نگهداری → کدهای CSS مرتب‌تر و فهم آن‌ها آسان‌تر می‌شود.
✅ بارگذاری سریع‌تر صفحه → مرورگرها CSS کوتاه‌تر را سریع‌تر پردازش می‌کنند.
✅ افزایش کارایی توسعه‌دهنده → نوشتن کدهای CSS سریع‌تر و مؤثرتر می‌شود.

۲. نمونه‌هایی از خصوصیات کوتاه شده در CSS

✅ ۱. خلاصه‌نویسی margin و padding

🔹 کد استاندارد:

.box {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;
}

🔹 کد کوتاه شده (Shorthand):

.box {
    margin: 10px 15px 20px 25px; /* بالا، راست، پایین، چپ */
}

🔹 توضیح:

• مقدار اول → بالا
• مقدار دوم → راست
• مقدار سوم → پایین
• مقدار چهارم → چپ

✅ همین روش برای padding نیز قابل استفاده است.

✅ ۲. خلاصه‌نویسی border

🔹 کد استاندارد:

.box {
    border-width: 2px;
    border-style: solid;
    border-color: black;
}

🔹 کد کوتاه شده:

.box {
    border: 2px solid black;
}

🔹 مزیت: فقط یک خط کد نوشته می‌شود.

✅ ۳. خلاصه‌نویسی font

🔹 کد استاندارد:

.text {
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
    font-family: Arial, sans-serif;
}

🔹 کد کوتاه شده:

.text {
    font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}

🔹 ترتیب مقادیر:

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

✅ ۴. خلاصه‌نویسی background

🔹 کد استاندارد:

.bg {
    background-color: lightblue;
    background-image: url("image.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

🔹 کد کوتاه شده:

.bg {
    background: lightblue url("image.jpg") no-repeat center / cover;
}

🔹 مزیت: حجم کد به شدت کاهش می‌یابد.

✅ ۵. خلاصه‌نویسی list-style

🔹 کد استاندارد:

ul {
    list-style-type: square;
    list-style-position: inside;
    list-style-image: url("icon.png");
}

🔹 کد کوتاه شده:

ul {
    list-style: square inside url("icon.png");
}

🔹 مزیت: لیست استایل‌ها در یک خط تعریف می‌شود.

✅ ۶. خلاصه‌نویسی flex در Flexbox

🔹 کد استاندارد:

.flex-item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

🔹 کد کوتاه شده:

.flex-item {
    flex: 1 1 0%;
}

🔹 ترتیب مقادیر:

flex: [grow] [shrink] [basis];

✅ ۷. خلاصه‌نویسی grid در CSS Grid

🔹 کد استاندارد:

.grid {
    grid-template-rows: 100px auto 200px;
    grid-template-columns: 1fr 2fr;
}

🔹 کد کوتاه شده:

.grid {
    grid-template: 100px auto 200px / 1fr 2fr;
}

🔹 مزیت: تعریف ساختار Grid در یک خط کد.

۳. مقایسه کد استاندارد و کوتاه شده در CSS

✅ استفاده از Shorthand Properties باعث بهینه‌سازی و کاهش حجم کدها می‌شود.

۴. نتیجه‌گیری

✅ خصوصیات کوتاه شده در CSS باعث کاهش حجم کد، افزایش خوانایی و بهبود عملکرد سایت می‌شوند.
✅ استفاده از Shorthand در margin, padding, border, background, font, flex, grid باعث کدنویسی بهینه‌تر و سریع‌تر می‌شود.
✅ برای درک بهتر، ترتیب مقدارهای خلاصه را حفظ کنید تا مرورگر بتواند آن را به درستی تفسیر کند.