شرح المفهوم
يحوّل هذا الدرس مهمة تنسيق صغيرة إلى شيء أقرب لعمل الواجهات الحقيقية. بدلاً من كتابة قواعد معزولة، ستقوم بتنسيق بطاقة تسعير قابلة لإعادة الاستخدام وتفكر في كيفية ملاءمة مكون واحد لصفحة أكبر. الهدف الرئيسي هو ممارسة دمج المشروع في أساسيات CSS والتسلسل: اختيار إعدادات افتراضية معقولة، الحفاظ على تناسق المسافات والحدود، وإجراء التحديثات في مكان واحد دون التسبب في آثار جانبية في أماكن أخرى. بحلول النهاية، يجب أن تكون قادرًا على ربط قواعد CSS البسيطة في مكون يبدو منظمًا، قابلاً للتنبؤ، وجاهزًا لإعادة الاستخدام.
أين تضع الكود
- ابدأ بالمتغيرات والمدخلات. ضع قواعد الأنماط في محددات الفئات (class selectors) القابلة لإعادة الاستخدام.
- أضف منطق المعالجة في القسم الأوسط.
- اختتم بالمخرجات والتحقق السريع.
مرجع الأوامر
- عاين البطاقة بمحتوى حقيقي وتحقق مما إذا كانت المسافات لا تزال متوازنة.
- غيّر رمز تصميم واحد مثل `border radius` أو `accent color` وقارن النتيجة.
- جمّع القواعد ذات الصلة لتسهيل مسح البطاقة وصيانتها لاحقًا.
- تأكد من أن دعوة الإجراء (call-to-action) تظل قابلة للقراءة مقابل لون خلفيتها.
دليل خطوة بخطوة
- طبّق أنماط البطاقة الأساسية أولاً ليكون للمكون حدود ومسافات واضحة.
- نسّق العنوان والسعر والزر بترتيب منطقي بدلاً من التنقل بين القواعد.
- اختبر تغييرًا بصريًا صغيرًا، مثل حشوة أكبر (padding) أو حد (border) أنعم، وقارن بين الإصدارين.
- راجع التسلسل (cascade) للتأكد من أن محدداتك (selectors) محددة بما يكفي دون أن تصبح ثقيلة.
- اختتم بالتحقق مما إذا كان المكون سيظل منطقيًا إذا أعيد استخدامه في صفحة أخرى.
تمارين تطبيقية
- أنشئ نسخة ثانية من بطاقة التسعير لخطة مميزة دون إعادة كتابة جميع الأنماط الموجودة.
- أضف حالة تمرير (hover state) خفيفة للزر واشرح لماذا يحسّن هذا التغيير المكون.
- أعد هيكلة البطاقة بحيث يسهل إعادة استخدام القيم المشتركة مثل الألوان والمسافات.
تحديات برمجية
- ابنِ قسم تسعير صغيرًا بثلاث بطاقات حيث تظل كل بطاقة متناسقة بصريًا.
- قلل التكرار من خلال تقديم أفكار أدوات مساعدة قابلة لإعادة الاستخدام أو خصائص مخصصة مشتركة.
مهام تمرين صغيرة
- أعد تسمية فئة (class) واحدة لجعل غرضها أكثر وضوحًا.
- أضف تحسينًا واحدًا يجعل المكون يبدو أكثر صقلًا.
- اكتب سطرًا واحدًا يصف ما يهدف مكون البطاقة هذا إلى إيصاله.
خطأ شائع
Skipping input validation or mixing logic/output in one unstructured block.
تحدٍ مصغّر من الواقع
Build a small real-life example for this lesson topic using 3 clear steps: input, process, output.