كيفية إدراج تعليق CSS

تضمين التعليقات في شفرة CSS مفيد وموصى به للغاية.

يتكون كل موقع من العناصر الهيكلية (التي تمليها HTML) وكذلك النمط المرئي أو "الشكل والمظهر" لهذا الموقع. يتم استخدام أوراق الأنماط المتتالية (CSS) في إملاء المظهر المرئي لموقع ويب. يتم الحفاظ على هذه الأنماط منفصلة عن بنية HTML للسماح بسهولة التحديث والالتزام بمعايير الويب.

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

تعد إضافة التعليقات إلى ملفات CSS لموقع الويب طريقة رائعة لإضافة بنية إلى أجزاء من هذا الرمز لقارئ إنساني يقوم بمراجعة المستند. وهي أيضًا طريقة رائعة لتفسير تلك الأنماط لأحد محترفي الويب الذين قد يضطرون إلى العمل على الموقع في المستقبل - بما في ذلك نفسك!

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

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

إضافة CSS التعليقات

إن إضافة تعليق CSS أمر سهل للغاية. يمكنك ببساطة تعليق تعليقك مع علامات التعليقات الافتتاحية والختامية الصحيحة:

• ابدأ تعليقك بإضافة / *
• أغلق تعليقك بإضافة * /

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

يمكن أن يكون تعليق CSS سطرًا واحدًا ، أو يمكن أن يأخذ عدة أسطر. فيما يلي مثال سطر مفرد:

div # border_red {border: thin solid red؛ } / * red border example * /

ومثال متعدد الخطوط:

/ *************************** ********************** ****** نمط لنص الرمز **************************** ************ *************** /

أقسام الخروج

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

/ * ----------------------- Header Styles ----------------------- ------- * /

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

& # 34 ؛ التعليق خارج & # 34؛ الشفرة

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

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

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

نصائح التعليق CSS

كخلاصة ، إليك بعض النصائح التي يجب تذكرها لاستخدام التعليقات في CSS:

1. يمكن أن تمتد التعليقات على عدة أسطر.
2. يمكن أن تتضمن التعليقات عناصر CSS لا تريد عرضها بواسطة المتصفح ، ولكن لا تريد حذفها بالكامل. هذه طريقة لطيفة لتصحيح أنماط صفحات موقع الويب - فقط تأكد من إزالة الأنماط غير المستخدمة (بدلاً من تركها علّق عليها) إذا قررت أنك لا تحتاج إليها على موقع الويب
3. استخدم التعليقات عندما تكتب CSS معقدًا لإضافة توضيحات وإعلام مطوري المستقبل ، أو بنفسك في المستقبل ، عن الأشياء المهمة التي يجب أن يعرفوها. سيوفر ذلك وقت التطوير المستقبلي لجميع المشاركين.
4. يمكن أن تتضمن التعليقات أيضًا المعلومات الوصفية مثل:
   • مؤلف
   • تاريخ الإنشاء
   • معلومات حقوق التأليف والنشر

أداء

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

في النهاية ، ستحتاج إلى إيجاد التوازن بين التعليقات المفيدة والكثير من التعليقات للحصول على فوائد كل من مستندات CSS.

المقالة الأصلية لجنيفر كرينين. حرره جيرمي جيرارد في 7/5/17