متغیرها، توابع و تمیزنویسی

متغیرهای CSS

:root {
    --color-primary: #22d3ee;
    --space: 16px;
    --radius: 12px;
}
.btn {
    background: var(--color-primary);
    padding: var(--space);
    border-radius: var(--radius);
}

اگر رنگ برند عوض شود، فقط یک خط را تغییر می‌دهی و کل سایت به‌روز می‌شود (همین سایت آرنا همین‌طور است).

توابع پرکاربرد

width: calc(100% - 40px);   /* محاسبه */
width: min(600px, 100%);    /* کوچک‌تر */
font-size: clamp(1rem, 2vw, 1.5rem);  /* بین دو حد، واکنش‌گرا */

حالت تاریک با متغیر

:root { --bg:#fff; --text:#111; }
:root[data-theme="dark"] { --bg:#0a0e1a; --text:#e7ecf5; }
body { background: var(--bg); color: var(--text); }

اصول تمیزنویسی

کلاس به‌جای id، نام معنادار، box-sizing: border-box، Mobile-First، پرهیز از !important.