غلطة شائعة في CSS: استخدام النجمة (*) بشكل خاطئ

قابلت ناس كتير بتعمل الغلطة دي 😅
ممكن تكون بسيطة بالنسبة ليك،
بس لو عاوز تتعلم صح وتبقى محترف ركز معايا لو سمحت 👇

النجمة (*) في CSS​

النجمة دي (*) اسمها Universal Selector 🌍
بتختار بيها كل العناصر في الصفحة (Selectors).

يعني لما تكتب كده مثلًا:

* {
    font-family: 'Cairo', sans-serif;
}

إنت كده بتقول للمتصفح: "طبّق نوع الخط ده على كل العناصر في الصفحة" 🧩

فين المشكلة؟ 🤔​

طيب سألت نفسك هل كل العناصر محتاجة خاصية Font-Family؟
عناصر زي img أو canvas مثلًا، ليه تخلي المتصفح يعمل شغل زيادة؟ 😵‍💫
ده ممكن يسبب مشاكل في الأداء لأن المتصفح بيحاول يطبّق الخاصية على حاجات مش محتاجاها أصلاً.

الحل الصحيح ✅​

الصح 👌 إنك تحط خاصية Font-Family في عنصر body فقط، كده العناصر اللي فعلاً بتحتاج الخط هتورث الخاصية دي تلقائيًا 🧠
زي كده:

body {
    font-family: 'Cairo', sans-serif;
}

كده هتخلي الموقع أخف 💨، والكود أنضف، والأداء أحسن بكتير 💪

الخلاصة 🚀​

ما تستخدمش * في كل حاجة، استخدمها بحكمة 😉
وخلي القاعدة العامة إنك تحط Font-Family في body وتخلي الباقي يورث الخاصية بشكل طبيعي.