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

غلطة شائعة في 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 وتخلي الباقي يورث الخاصية بشكل طبيعي.