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

click fraud protection

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

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

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

التعليقات تضيف البنية والوضوح

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

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

instagram viewer

لعيون المحترفين فقط

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

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

من السهل جدًا إضافة تعليق CSS. قم بتعليق تعليقك باستخدام علامتي التعليق الافتتاحي والختامي الصحيحين:

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

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

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

/ * مثال على الحدود الحمراء * /
div # border_red {
الحدود: رقيقة صلبة حمراء ؛
}
/***************************
****************************
نمط نص الكود
****************************
***************************/

تقسيم الأقسام

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

/ * أنماط الرأس * /

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

كود التعليق

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

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

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

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

instagram story viewer