الكلاس Class والمعرف ID في لغة HTML

 في لغة HTML هناك سمتين أساسيتين من خلالهم يمكن استهداف العناصر عبر اللغات الاخرى مثل CSS , JavaScript و لذلك هاتين السمتين تلعبان الدور الأكبر في طريقة الإستهداف , طبعاً الإستهداف ليس مقتصر على تلك السمات وسنتعرف على هذا أكثر في دروس CSS لكن هاتين السمتين هما الأبرز وسيكون اعتمادك عليهم أساسي.

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

 الكلاسات Classes

 هي سمة تسمح لك بإستهداف عنصر أو مجموعة عناصر في الصفحة لكي تعطيهم نفس التنسيق أو الوظيفة , هي معرفات تقبل إعادة الإستخدام

مثال لدينا في الصفحة [[<p>فقرة</p>]] [[<del>نص محذوف</del>]] [[<q>اقتباس قصير</q>]]

 نريد مثلاً أن نجعل لهم خلفية باللون الأحمر بلغة CSS

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

لكن هنا سأكون كررت الكود ثلاث مرات مما يزيد حجم الصفحة وليس هذا فقط لو أردت تعديل ذلك اللون سيكون علي تعديله في الثلاث مرات.

هنا يأتي دور الكلاس ليجعل هناك رابط مشترك بينهم , الكلاس  يربط بينهم جميعاً .

لنعطيهم كلاس وليكن مثلاً myItems

سيكون شكلهم كالتالي

<p class="myItems">فقرة</p>
<del class="myItems">نصح محذوف</del>
<q class="myItems">اقتباس قصير</q>

 الآن يمكنك استهدافهم جميعاً عبر هذا الكلاس

وهكذا يكتب الكلاس [[class="myItems"]] 

أيضاً يمكن للعنصر الواحد أن يأخذ أكثر من كلاس بأن تفصل بين كلاس وآخر بمسافة مثال

[[<p class="myItems newone">فقرة</p>]]

 أصبح لهذا العنصر في تلك الحالة كلاسين يمكنك أن تستهدف العنصر بأى منهم , وتستخدم عادة الكلاسات الإضافية عند الأمور المشتركة

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

ويتم استهداف الكلاس في لغة CSS  برمز النقطة [[.]] 

 مثال من لغة CSS لكن لا تركز فيه هو فقط للإيضاح سنعرف تفاصيل أكثر مستقبلاً ان شاء الله

.myItems {
background-color:red
}

المعرفات IDs 

 نفس ما ذكرناه في الكلاسات لكن الـ ID هو فريد من نوعه حتى لو قبلت الصفحة تكراره ليس من المفترض أن تكرره

بل يكون عنصر واحد فقط هو الذي عليه الـ ID يعني لو أعطيت ID لعنصر لا تعطي نفس هذا الـ ID لاى عنصر آخر في الصفحة

ويكتب الـ ID بالشكل التالي [[id="special"]] 

 لا يمكن وضع أكثر من ID لنفس العنصر هو واحد فقط

[[<q id="special">فقرة</q>]]

 يمكنك أن تضع لعنصر واحد ID وكذلك يمكنك أن تضع له كلاسات 

مثال

<q id="special" class="myItems newone">فقرة</q>

 ويتم استهداف الـ ID في لغة CSS برمز #

 

#special {
font-size:18px
}

 

 لماذا أستخدم المعرف؟

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

لو عناصر لها كلاس وانت وضعت لها خلفية حمراء

وأحد هذه العناصر له معرف ID ووضعت أنت خلفية زرقاء لهذه المعرف حينها سيتم أخذ كود المعرف وتجاوز كود الكلاس

فهي تستخدم لإضفاء أهمية أكبر على العنصر , لذلك نستخدمها فقط للعناصر المهمة في الصفحة

ولهذا في بلوجر كل قسم رئيسي [[<b:section>]] له ID خاص به لو كررته لن يقبل القالب عملية الحفظ نفس الشئ للإضافات [[<b:widget>]] كل إضافة في بلوجر يكون لها ID خاص بها تولده بلوجر تلقائياً 

كذلك الـ ID يتم التعامل معه أسرع من قبل المتصفحات فيستجيب أسرع للأكواد لن تلاحظ الأمر وأنت ترى الصفحة لكن هذا ما يحدث في خلفية الأحدايث خصوصاً أنه يكون فريد في الصفحة

 

شروط استخدام اسم Class و ID

لكي تضيف اسم كلام أو ID هناك شروط يجب أن تتحقق

1.  حروف صغيرة (a-z): هذه هي الممارسة الأكثر شيوعًا والموصى بها.
2. حروف كبيرة (A-Z) على الرغم من السماح بذلك، فمن الأفضل عمومًا الالتزام بالأحرف الصغيرة لتجنب مشكلات حساسية الحالة وتحسين سهولة القراءة.
3. أرقام (0-9): يمكن استخدام الأرقام، ولكن يجب ألا يبدأ اسم id أو class برقم.
4. واصالات أو شرطة فاصلة (-): تُستخدم على نطاق واسع لفصل الكلمات داخل اسم id أو class (مثل، [[main-navigation]]، [[product-details]]). هذا يحسن سهولة القراءة. 
5.  شرطات سفلية (_): يُسمح أيضًا بالشرطات السفلية كفواصل للكلمات (مثل، [[user_profile]] [[error_message]]). ومع ذلك، تُفضل الواصلات عمومًا في تطوير الويب.
6. لا تستخدم مسافات إلا فقط مع الكلاسات وهذا لعمل أكثر من كلاس كما وضحنا في الأمثلة
7. لا تستخدم رموز % & * أى رموز تجنبها

 

مقارنة بين Class و ID

الميزة	Class	ID
التفرد	يمكن استخدامه على عناصر متعددة	يجب أن تكون فريدة في الصفحة
تعدد القيم	يمكن للعنصر أن يحتوي على عدة كلاسات	معرف واحد فقط لكل عنصر
محددات CSS	النقطة (.) .class-name	الهاش (#) #id-name
الأهمية أو الأولوية في CSS	أقل (0,0,1,0)	أعلى (0,1,0,0)
الاستخدام الأساسي	تنسيق المكونات القابلة لإعادة الاستخدام	تحديد العناصر الفريدة
سرعة استجابة المتصفح	أبطأ	أسرع