شرح صفوف ومحتوى الفقرة
يعد الالتزام بقواعد التسمية القياسية لخاصيتي
class و id أمراً جوهرياً لضمان مقروئية الكود وتوافقه الشامل عبر كافة المتصفحات. ويجب ألا تحتوي الأسماء على مسافات إطلاقاً، كما ينبغي تجنب الرموز الخاصة، والحرص على أن تعبر التسمية عن وظيفة العنصر ومحتواه لا عن مظهره البصري المؤقت.
HTML
<!-- RECOMMENDED: Semantic kebab-case naming -->
<div class="post-summary" id="featured-post">
<button class="action-btn primary-btn">Submit</button>
</div>
<!-- AVOID: Ephemeral visual or cryptic naming -->
<!-- <div class="red-box-left" id="txt1">Bad Practice</div> -->تمثل صيغة الكباب kebab-case المعيار الأكثر انتشاراً واعتماداً في أوساط الويب العالمية، حيث تكتب الكلمات الإنجليزية بحروف صغيرة وتفصل بشرطات عادية مثل
product-card. ومن الأخطاء الشائعة تسمية العناصر بألوانها مثل blue-box؛ لأن تغيير هوية الموقع اللونية مستقبلاً سيجعل الاسم مضللاً ويتطلب تعديلات برمجية واسعة.