تنظيم الكود بشكل احترافي (Code Organization)

تنظيم الكود مش بس بيخلي شكله حلو، لكن كمان بيخلي:

• الكود سهل القراءة لك ولأي مطور بعدك.

• قابل للصيانة والتطوير.

• يقلل الأخطاء البرمجية.

🔹 1. تنسيقات الكود (Indentation)

ما هي الـ Indentation؟

• معناها عمل مسافات (Tab أو 2–4 مسافات) عشان توضح التدرج الهرمي للعناصر.

• كل ما عنصر يكون جوه عنصر تاني → نزوده مسافة.

✅ مثال سيئ (غير منسق):

✅ مثال منسق (احترافي):

🔎 الفائدة:

• أسهل تقرأ الكود وتفهم العناصر المتداخلة.

• مهم جدًا في المشاريع الكبيرة.

🔹 2. التعليقات واستخدامها

ما هي التعليقات؟

• نصوص داخل الكود مخصصة للتوضيح فقط، المتصفح يتجاهلها.

• بتساعدك تشرح نفسك أو تذكر سبب كتابة الكود.

✅ الشكل:

استخداماتها:

• شرح جزء من الكود.

• تذكير نفسك أو غيرك بسبب كتابة وسم معين.

• تعطيل جزء من الكود مؤقتًا.

✅ مثال:

⚠️ ملاحظات:

• لا تكتب أسرار أو كلمات مرور في التعليقات (ممكن أي حد يشوفها من الكود).

• استخدم التعليقات باعتدال، مش في كل سطر.

🔹 3. كتابة كود نظيف وقابل للصيانة (Clean Code)

إزاي نكتب كود نظيف؟

1. أسماء واضحة:

   • استخدم أسماء مفهومة للـ id و class.

   • مثال سيئ:

   • 

   • مثال جيد:

     

2. تجنب التكرار:

   • ما تكتبش نفس الكود مرتين بدون داعي.

   • خلي فيه إعادة استخدام (Reusable Code).

3. تقسيم الصفحة منطقيًا:

   • استخدم العناصر الدلالية (مثل <header>, <nav>, <main>, <footer>).

   • ده بيخلي الكود أوضح وأسهل.

4. مسافات فارغة بين الأقسام:

   • سيب سطر فاضي بين الأقسام الكبيرة للكود.

   • ده يسهل القراءة.

5. التناسق (Consistency):

   • لو بدأت تستخدم 2 مسافة للـ indentation → استمر بيها في كل الكود.

   • لو بتكتب أسماء كلاس بالحروف الصغيرة → خليك ثابت.

🔹 مثال عملي (كود نظيف ومنظم)

🔎 مميزات الكود:

• منسق (Indentation مرتب).

• فيه تعليقات توضّح الأقسام.

• أسماء واضحة (intro, main, footer).

• مقسم لأجزاء منطقية.

🔹 ملخص

• Indentation → تنسيق الكود بشكل هرمي (سهل القراءة).

• التعليقات → لتوضيح الكود (بدون إفراط).

• Clean Code → أسماء واضحة، تقسيم منطقي، تجنب التكرار، وتناسق ثابت.