شرح صفوف ومحتوى الفقرة
في هندسة واجهات الإنتاج الاحترافية، نادراً ما تعتمد على أداة واحدة بمعزل عن غيرها؛ فالنهج الأمثل يجمع متغيرات التصميم العامة للألوان والسمات، مع CSS Modules أو ملفات الكلاسات لتنسيق البنية وحالات التفاعل والتجاوب، مع حصر كائن style المضمن في الأبعاد والنسب المحسوبة لحظياً فقط. قارن بين الأساليب في المصفوفة التالية:
| أسلوب التنسيق | نقطة القوة الأساسية | القيد الهندسي أو ضابط الاستخدام |
|---|---|---|
ملفات CSS عبر className | دعم كامل لـ :hover و@media والتخزين المؤقت | نطاق الأسماء عام وقد يتصادم في المشاريع الضخمة |
وحدات *.module.css | عزل تلقائي للأسماء بتوليد لاحقة فريدة في Vite | تُستورد ككائن styles مخصص لكل مكون |
كائن style={{}} المضمن | مثالي للنسب المئوية والإحداثيات المحسوبة لحظياً | لا يدعم :hover ولا استعلامات الشاشات @media |
| الخصائص المنطقية Logical CSS | انعكاس تلقائي متقن بين الإنجليزية والعربية RTL | استبدال الاتجاهات الفيزيائية بـ inline-start |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
نسّقت في هذا الدرس مكونات React عبر ملفات CSS وخاصية className، وكتبت كائنات style المضمنة بصيغة camelCase، وركّبت الكلاسات الشرطية بأمان، وعزلت الأسماء بوحدات CSS Modules، ودعمت الواجهات العربية والإنجليزية بالخصائص المنطقية. الخطوة التالية: انتقل الآن إلى الدرس رقم 10 «تمرير البيانات إلى المكونات عبر Props» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.