٧ أخطاء في CSS بيعملها كل مبتدئ (وإزاي تتفادىها)

أغلب اللي بيقول «أنا ضعيف في CSS» مش ضعيف فعلًا — هو واقع في شوية أخطاء بتتكرر، وكل واحدة منهم بتخلي أي تصميم يطلع مكسور. دي أشهرها وأسرع حل لكل واحدة.

١) بتحاول تظبط المسافات بـ margin بدل ما تفهم الصندوق

كل عنصر في CSS صندوق: محتوى + حشو داخلي (padding) + إطار (border) + مسافة خارجية (margin). لو مش متخيل الشكل ده في دماغك، كل مسافة هتكون تخمين.

⚡ حاجة بتوفر وقت: box-sizing: border-box على كل العناصر. بعدها العرض اللي بتديه للعنصر بيبقى كامل، ومش هتلاقي حاجة كبرت من غير ما تعرف ليه.

٢) بتستخدم float للترتيب

الـ float كان حل قديم للترتيب الأفقي. دلوقتي عندك flexbox للسطر الواحد، وgrid للشبكة الكاملة. استخدام float في 2026 = مشاكل ارتفاع ومحتاج clearfix، ومفيش أي فايدة.

٣) بتحدد أطوال ثابتة بدل ما تسيب المحتوى يحدد

height: 500px على كارت فيه نص؟ أول ما النص يطول، المحتوى هيطلع برة الكارت. استخدم min-height بدل height، وخلي النص هو اللي بيحدد الطول.

٤) مش بتعمل تصميم للموبايل من الأول

لو بدأت بتصميم عريض وبعدين حاولت «تكسر» السطور للموبايل، هتقع في شبكة من التعديلات المتضاربة. ابدأ بشاشة صغيرة، وبعدين زوّد بتفصيل بسيط:

@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

٥) بتستخدم !important عشان تحل خناقة

كل مرة تكتب !important، إنت بتدفن مشكلة هترجع تظهر بعد أسبوعين ومش هتعرف مصدرها. المشكلة الحقيقية في الأغلب إن في أكتر من قاعدة بتستهدف نفس العنصر — فافهم الأولوية (specificity) وسمّي الكلاسات صح، بدل ما تجبر.

٦) مش بتستخدم متغيرات

لو نفس اللون مكتوب في ١٥ مكان، وتغيّره هيبقى ١٥ تعديل ونسيان واحد. حط الألوان والمسافات في :root كمتغيرات، وسمّيهم بمعنى (--brand، --muted) مش بكود اللون.

٧) بتنسخ كود مش فاهمه

ده أخطر واحد. الكود المنسوخ بيشتغل النهارده وبيكسر بعد شهر لما تلمس حاجة تانية. لو مش فاهم سطر، امسحه وجرّب من غيره — أفضل من إنك تخاف تلمس ملف الستايل كله.

CSS بيتعلّم بالإيد مش بالقراءة. خد أي صفحة بتعجبك وقلّدها من الصفر — هتتعلم أكتر من ١٠ فيديوهات.