الدرس 13
طريقة التسمية Naming Convention
معنى أسماء العناصر والمصطلحات
| المعنى | Stand For | Name |
| طريقة ثابتة بنمشي عليها في تسمية العناصر | Naming Convention | |
| كلمات بحروف صغيرة وبينها شرطة | Kebab Case |
اسم الكلاس بيساعدك تعرف العنصر ده بيعمل إيه وانت بتقرأ الكود
خلينا نشوف إزاي نكتب أسماء واضحة ونستخدمها في CSS
اسم يوضح وظيفة العنصر
عندنا فقرة لوصف منتج فممكن نسمي الكلاس product-description
<p class="product-description">A Practical Guide To CSS</p>.product-description {
color: blue;
}النقطة بنكتبها في محدد CSS بس اسم الكلاس داخل HTML من غير نقطة
الاسم product-description هيفضل واضح حتى لو غيرنا اللون
لكن blue-text بيربط الاسم بلون ممكن يتغير
علشان كدة الاسم مش معبر
الا لو انت في المستقبل حبيت تعمل اطار عمل
ودة بيكون فيه Class خاص باللون أو حجم الخط
ودة هتشوفه في المستقبل باذن الله
والاسمين صحيحين من ناحية الكتابة
أسماء سليمة
الأسماء دي نقدر نستخدمها مباشرة بعد النقطة في CSS
.card { color: blue; }
.product-title { color: green; }
.item2 { color: red; }
.user_name { color: purple; }
._notice { color: brown; }تقدر تستخدم أرقام بعد بداية الاسم والشرطة السفلية مسموحة كمان في أمثلتنا هنلتزم بطريقة Kebab Case زي product-title علشان شكل الأسماء يبقى ثابت وسهل القراءة
أمثلة غلط في محدد CSS المباشر
الأمثلة دي فيها أخطاء متعمدة متكتبهاش بالشكل ده علشان تختار الكلاس
.2card { color: red; }
.product! { color: blue; }الأول بدأ برقم والتاني فيه علامة تعجب علشان نستخدم الاسم مباشرة بعد النقطة نغيرهم للأسماء دي
.card-2 { color: red; }
.product { color: blue; }الكلام هنا عن كتابة محدد CSS بالشكل المباشر مش عن منع تخزين الاسم داخل خاصية class في HTML
المسافة معناها كلاس تاني
<p class="product description">Two Separate Classes</p>هنا فيه كلاسين واحد اسمه product والتاني description لو قصدك اسم واحد اكتبه product-description
الحروف لازم تتطابق
<p class="product-title">CSS Guide</p>/* Matches */
.product-title { color: green; }
/* Does Not Match */
.Product-Title { color: red; }الحروف الكبيرة والصغيرة بتفرق فاكتب الاسم بنفس الشكل في HTML و CSS
جرب بنفسك
اعمل عنوان باسم page-title وفقرة باسم page-description واكتب لكل واحد لون مختلف ثم غير اسم الكلاس في HTML فقط ولاحظ إن التنسيق مش هيطابق العنصر لحد ما تعدل الاسم في CSS كمان