ما وحدات CSS التي يجب استخدامها ومتى؟

Question

Accepted Answer

تنقسم وحدات CSS إلى **مطلقة** (ثابتة) و**نسبية** (تتغير مع شيء ما). الاختيار الجيد هو مفتاح التخطيطات سريعة الاستجابة والمتاحة.

## المطلقة

```css
.x { width: 100px; }  /* px — fixed pixels; predictable, doesn't scale */
```

استخدم `px` للأشياء التي لا يجب أن تتغير حجمها (الحدود والتفاصيل الثابتة الصغيرة).

## النسبية — الأهم منها

```css
font-size: 1.5rem;  /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em;   /* em — relative to the PARENT's font-size. Compounds! */
width: 50%;         /* % — relative to the parent's size */
width: 50vw;        /* vw — 50% of viewport WIDTH */
height: 100vh;      /* vh — 100% of viewport HEIGHT */
```

## rem مقابل em — التمييز الحاسم

```css
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em;  } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
```

`em` **يتراكم** من خلال التداخل (الطفل يرث من والده ويضرب)، مما قد يؤدي إلى تضخيم غير متوقع. `rem` يرجع دائماً إلى الجذر، لذا فهو يمكن التنبؤ به — الخيار الأول لأحجام الخطوط والمسافات. استخدم `em` عندما **تريد** تحديد الحجم نسبة إلى الخط المحلي (مثلاً padding على زر يتغير مع نصه).

## لماذا تهم الوحدات النسبية للوصول

```css
font-size: 16px;   /* ❌ ignores the user's browser font-size preference */
font-size: 1rem;   /* ✅ scales when the user increases their default size */
```

استخدام `rem` للنصوص يحترم المستخدمين الذين يعينون خطاً افتراضياً أكبر — وهي فائدة حقيقية للوصول تكسرها `px`.

## لماذا تهم

الوحدة الصحيحة تجعل التخطيطات سريعة الاستجابة وسهلة الوصول: `rem` للنصوص والمسافات (يمكن التنبؤ به + يحترم إعدادات المستخدم)، `%`/`vw`/`vh` للتخطيط السائل، `px` للتفاصيل الثابتة، و`em` للتحديد النسبي المحلي.

وحدات viewport الأحدث (`dvh`, `svh`) تحل أيضاً مشاكل ارتفاع شريط العناوين على الهاتف المحمول.