شرح بنية CSS — كيف تكتب الكود بشكل صحيح وبلا أخطاء؟

في الدرس السابق فهمنا ما هي CSS ولماذا نحتاجها. الآن جاء وقت أن نكتب أول كود CSS حقيقي ونفهم كل جزء فيه بدقة. هذا الدرس هو أساس كل ما ستتعلمه لاحقاً — لأن كل خاصية CSS في العالم تتبع نفس الشكل العام هذا.

كيف تبدو قاعدة CSS الكاملة؟

إليك الشكل العام لأي قاعدة CSS — انظر إليها بهدوء:

محدد {
    خاصية: قيمة;
    خاصية: قيمة;
}

ومثال حقيقي:

h1 {
    color: blue;
    font-size: 32px;
    text-align: center;
}

هذا كل شيء. ثلاثة مكونات فقط تحكم كل CSS في العالم.

شرح كل جزء — خطوة بخطوة

الثلاثة المكونات الرئيسية — بالتفصيل

١. المحدد (Selector)

المحدد يُخبر CSS من الذي سيتأثر بهذا التنسيق. يمكن أن يكون اسم وسم HTML، اسم كلاس، أو معرّف ID.

/* تنسيق كل عناصر p في الصفحة */
p {
    color: gray;
}

/* تنسيق كل عناصر h2 */
h2 {
    font-size: 24px;
}

٢. الخاصية (Property)

الخاصية تُحدد ماذا تريد أن تغيّر في العنصر. CSS تحتوي على مئات الخصائص — لكن الأكثر استخداماً منها عشرون خاصية تقريباً.

p {
    color: red;          /* لون النص */
    font-size: 18px;     /* حجم الخط */
    font-weight: bold;   /* سماكة الخط */
    text-align: center;  /* محاذاة النص */
    background-color: yellow; /* لون الخلفية */
}

٣. القيمة (Value)

القيمة تُحدد كيف تريد أن يكون التغيير. كل خاصية لها قيم مقبولة خاصة بها — مثلاً color تأخذ اسم لون أو كود لون.

h1 {
    color: blue;          /* اسم اللون */
    color: #2563eb;       /* كود HEX */
    color: rgb(37,99,235); /* قيمة RGB */
}

القواعد الذهبية في كتابة CSS

قبل أن تكتب أي كود CSS، احفظ هذه القواعد الأربع:

1. الأقواس المعقوفة إلزامية: كل مجموعة تنسيق تبدأ بـ { وتنتهي بـ }
2. النقطتان للفصل: اكتب دائماً خاصية: قيمة — النقطتان تفصل الاثنتين
3. الفاصلة المنقوطة إلزامية: ضع ; بعد كل خاصية بلا استثناء
4. سطر لكل خاصية: ليس إلزامياً لكنه يجعل الكود أوضح وأسهل في الصيانة

/* ✅ كتابة صحيحة واحترافية */
p {
    color: red;
    font-size: 18px;
    text-align: right;
}

/* ⚠️ تعمل لكن صعبة القراءة */
p { color: red; font-size: 18px; text-align: right; }

/* ❌ خطأ — نسيان الفاصلة المنقوطة */
p {
    color: red
    font-size: 18px;
}

خصائص CSS لا تفرق بين الحروف الكبيرة والصغيرة؟

CSS في الغالب لا تفرق بين color و COLOR. لكن الاتفاق المهني بين المطورين هو كتابة كل شيء بأحرف صغيرة (lowercase). التزم بها من البداية لأنها العادة الصحيحة.

مثال عملي كامل — تنسيق صفحة بسيطة

إليك ملف CSS لتنسيق صفحة HTML بسيطة:

/* ===========================
   تنسيق الصفحة العامة
   =========================== */

body {
    background-color: #f8fafc;
    font-family: Arial, sans-serif;
    color: #1e293b;
}

/* ===========================
   العناوين
   =========================== */

h1 {
    color: #2563eb;
    font-size: 36px;
    text-align: center;
}

h2 {
    color: #0f172a;
    font-size: 24px;
}

/* ===========================
   الفقرات
   =========================== */

p {
    font-size: 18px;
    line-height: 1.8;
    color: #475569;
}

الصفحة ستتحول من نص عادي إلى صفحة ذات هوية بصرية واضحة — بفضل هذه القواعد البسيطة.

الأسئلة الشائعة — FAQ

هل يجب وضع الفاصلة المنقوطة في آخر خاصية؟

تقنياً، آخر خاصية في الكتلة لا تحتاج إلى ; لأن CSS لن تنتظر خاصية أخرى. لكن الممارسة الاحترافية هي وضعها دائماً — لأنك إذا أضفت خاصية جديدة لاحقاً ونسيت الفاصلة قبلها ستحدث أخطاء.

هل CSS حساسة لحالة الأحرف (كبيرة/صغيرة)؟

في معظم الحالات لا. COLOR: RED تعمل مثل color: red. لكن بعض القيم مثل أسماء الملفات والمسارات قد تكون حساسة حسب نظام التشغيل. اكتب دائماً بأحرف صغيرة لتجنب أي مشكلة.

هل يمكن كتابة عدة قواعد CSS في سطر واحد؟

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

ما الفرق بين CSS و Inline Style؟

Inline Style هو كتابة CSS مباشرة على الوسم: <h1 style="color:blue">. CSS في ملف منفصل أو في <style> هو الطريقة الصحيحة للمشاريع الحقيقية لأنها تفصل التصميم عن المحتوى.