كيفية إضافة تعليقات إلى أوراق الأنماط المتتالية (CSS)

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

المشكلة مع أوراق الأنماط

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

التعليقات إضافة هيكل والوضوح

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

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

لالمهنيين فقط

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

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

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

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

  /*

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

  */

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

يمكن أن يتناول تعليق CSS أي عدد من الأسطر. فيما يلي مثالان:

/ * red border example * / div # border_red { border: thin solid red؛ }/*******************************************************نمط لنص الرمز*******************************************************/

أقسام الخروج

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

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

تشير هذه التعليقات إلى بداية قسم جديد من الترميز.

رمز "التعليق خارج"

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

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

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

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

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

أداء

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