طريقة كتابة التعليقات في CSS وأهم استخداماتها لتنظيم الكود

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

مراجعة سريعة لتعليقات HTML:

في لغة HTML، نكتب التعليقات باستخدام هذا الشكل:

<!-- هذا تعليق -->

يتم فتح التعليق باستخدام . يمكن أن تكتب داخل هذا التعليق أي نص أو ملاحظات بلغتك المفضلة، سواء كانت عربية أو إنجليزية. كما يمكن استخدام اختصار لوحة المفاتيح Ctrl + / لإضافة أو إزالة تعليق على السطر المحدد داخل بعض المحررات مثل Visual Studio Code.

الآن ننتقل إلى CSS:

في لغة CSS، طريقة كتابة التعليقات تختلف قليلاً. لكتابة تعليق في ملف CSS، نستخدم الشكل التالي:

/* هذا تعليق */

يتم فتح التعليق باستخدام /* ويُغلق باستخدام */. أي محتوى يتم وضعه بينهما لن يتم تنفيذه أو عرضه في المتصفح.

مثال على تعليق داخل CSS:

/* تنسيق العنصر الرئيسي */
body {
  background-color: #f5f5f5;
}

يمكن استخدام التعليقات أيضًا لكتابة أجزاء من الأكواد نرغب في الاحتفاظ بها دون تنفيذها في الوقت الحالي. على سبيل المثال:

/*
body {
  background-color: red;
}
*/

في هذا المثال، الكود لن يتم تنفيذه لأنه داخل تعليق، لكنه سيظل محفوظًا في الملف لتعديله لاحقًا إن لزم الأمر.

كتابة تعليق متعدد الأسطر:

للتعليق على أكثر من سطر في CSS، يمكنك ببساطة فتح التعليق مرة واحدة وكتابة أي عدد من الأسطر داخله، مثل:

/*
هذا تعليق متعدد الأسطر
يمكنك كتابة أي عدد من الملاحظات هنا
*/

معاينة التعليقات في المتصفح:

عند فتح الكود في المتصفح وتشغيل أدوات المطور (Inspect)، ستلاحظ أن التعليقات لا تظهر ضمن العناصر المعروضة، سواء في HTML أو CSS. هذا يؤكد أن التعليقات مخصصة للمبرمج فقط وليست مرئية للمستخدم النهائي.

اختصار لوحة المفاتيح للتعليقات:

في أغلب بيئات التطوير مثل VS Code، يمكن استخدام اختصار Ctrl + / لكتابة أو إزالة تعليق، سواء كنت في ملف HTML أو CSS. هذه الطريقة توفر الوقت وتساعد في إدارة الأكواد بسرعة.

استخدام التعليقات لحفظ أكواد مؤقتة:

أحيانًا أثناء تطوير الموقع، قد تحتاج إلى تعطيل جزء من الكود دون حذفه. في هذه الحالة، يمكنك وضعه داخل تعليق ليظل محفوظًا دون تنفيذه، مثل:

/*
h1 {
  color: blue;
  font-size: 32px;
}
*/

نصيحة ختامية:

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

نتمنى أن يكون الشرح قد ساعدك على فهم آلية التعليقات في CSS. لا تنس تجربة كتابة تعليقات بنفسك لتثبيت المعلومة.

دروس اونلاين بلس

طريقة كتابة التعليقات في CSS وأهم استخداماتها لتنظيم الكود