ما مفهوم Clean Code الكود النظيف في Html CSS و Sass ؟

الكود النظيف clean code هو مجموعة من المبادئ والأعراف التي يطبقها المبرمج قبل البدء وخلال كتابة الشيفرة البرمجية.

1. الإبقاء على البساطة و عدم التعقيد بدون داعِ
2. وتقسيم العمل على أجزاء مثل دوال أو مكونات لعدم تكرار نفس الشيفرة
3. عدم كتابة أجزاء بدون استخدامها
4. استخدام أسماء ذات دلالة للمتغيرت و أسماء الأصناف..
5. إضافة تعليقات

تطبيق هذا حسب اللغات التي طرحتها:

• HTML: استخدام القوالب، أي مثل كتابة الترويسة و التذييل مرة واحدة ثم استدعائهم في عدة ملفات
• CSS: استخام الأصناف Classes، كتابة أصناف تقوم بتجميع التنسيقات لعدد من العناصر المراد أن يكون لها تنسيق مشترك.
• SASS: استخدام المتغيرات، مثل اللون - حجم النص - الأبعاد، استخدام الدوال بطرية فعالة

هناك عدة قواعد يجب إحترامها عند كتابة أكواد HTML CSS و Sass

• أولا لنبدء ب HTML, لكتابة كود HTML نظيف يجب عليك :

1- كتابة الكود بجدية :

  أهم شيء تحتاجه لكتابة كود جيد هو رغبتك في فعل الأشياء بشكل صحيح. تعد كتابة كود HTML نظيفًا أمرًا سهلاً ، ولكن عليك أن تهتم وتولي الكثير من الاهتمام. وعدم التسرع في كتابة الشيفرات

2- إحترام مسافة البداية Indent : 

الكود ذي المسافة البادئة أسهل في القراءة ، وأسهل في الفهم ، وأسهل في التعديل ، وأسهل في الصيانة. ما عليك سوى إلقاء نظرة على مدى صعوبة فهم العلاقات بين الأب والطفل بين العناصر عندما لا يتم وضع مسافة بادئة للشفرة بشكل صحيح.

3- عدم المبالغة في إستخدام عناصر DIV: 

Divitis   هو اسم مضحك لمشكلة شائعة في HTML. غالبًا ما نفرط في استخدام divs ، ويرجع ذلك أساسًا إلى أننا نريد التفاف واستهداف جميع عناصر التصميم في CSS. ثم ينتهي بنا الأمر بالحصول على قائمة أبدية من divs غير الضرورية تمامًا

4- تجنب التعليقات:

HTML ليست لغة برمجة ، والتعليقات ليست ضرورية لأن ترميز HTML لا يحتاج إلى شرح. إذا وجدت نفسك تعلق على HTML كثيرًا ، فيجب عليك مراجعة مرجع عناصر HTML

5- كتابة أسماء الأقسام classes بشكل واضح:

استخدم أسماء ذات معنى لمعرفاتك وفئاتك. يجب أن تكون قصيرة ووصفية وتمثل مفهومًا واحدًا فقط. سيجعل HTML الخاص بك أكثر وضوحًا وعملية التصميم أسهل

• أما بالنسبة ل CSS:

1-  تسمية العناصر بذكاء

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

2- "لا تكرر نفسك"

يرمز DRY إلى "لا تكرر نفسك". كما يمكننا أن نفهم من اسمها ، تهدف DRY إلى تجنب التكرار قدر الإمكان , يعني إدا كنت تحتاج نفس الكود في مناطق مختلفة في المشروع يمكنك وضعه على شكل قسم وإستعماله متى أردت ذلك

3- تجنب إستعمال important !

تتميز العلامة important! بأعلى درجة خصوصية لجميع محددات CSS. إذا كنت بحاجة إلى تجاوز علامة important! ، فعليك استخدام علامة important! أخرى. وهذا يجعلك تستخدم المزيد والمزيد من العلامات important! . مما يجعل صيانة شفرة CSS الخاصة بك أكثر صعوبة. 

4- لا تستخدم الأنماط المضمنة

وفقًا لمبدأ فصل الاهتمامات ، يجب فصل CSS و HTML لأسباب مثل سهولة القراءة والصيانة.

5- كن متسقا

لا تتعلق كتابة كود HTML النظيف دائمًا باختيار الممارسات الجيدة وتجنب الممارسات السيئة. في كثير من الأحيان يمكنك استخدام طرق مختلفة لكتابة نفس سطر التعليمات البرمجية

• أما فيما يتعلق ب scss فيجب عليك

1- إنشاء المكونات

تحدد بنية الملف واستراتيجية عملية التطوير المستقبلية ، خاصةً إذا كان تطبيقك ينمو وكنت تعمل مع فريق فكتابة المكونات سيسهل عليك المهمة

2-  استخدم  المتغيرات  و mixins المحلية

المتغيرات والخلطات عالمية في Sass. إذا قمت بتعريف $primary-color  مرة واحدة ، يمكنك استخدام القيمة في أي مكان. هذا ليس بالشيء الجيد دائمًا. على سبيل المثال: لديك قيمة ثابتة (مثل الارتفاع الثابت) ، ولا تستخدمها إلا للمكون والعناصر التابعة له. سيكون الخيار الأول (وليس الخيار الفعال) هو ترميز القيمة عدة مرات ، بالإضافة إلى خيار آخر ، لإنشاء متغير عام. قد يؤدي هذا الأسلوب لاحقًا إلى تضخيم قائمة المتغيرات العامة الخاصة بك برمز محدد للغاية.

3- استخدم maps  أو القوائم

maps  هي متغيرات Sass تشبه الكائنات. نستخدمها لقيم التخطيط العالمية ، ، وقيم التكوين العالمية الأخرى. قد تسأل ، "لماذا maps   وليس المتغيرات العادية؟" على الرغم من أن استخدام متغير أسهل بكثير من جلب قيمة من map  ، فإن النقطة الأساسية هي سهولة القراءة. maps  عبارة عن كائن بمظهر JSON مع إمكانية تداخل القيم. بدلاً من قائمة طويلة من المتغيرات العامة (التي ليس من السهل قراءتها)

4- حلقة الأشياء المتكررة

باستخدام for and @each@ ، يمكنك تحقيق رمز نظيف للغاية ويمكن صيانته بسهولة.