شرح المفهوم
إعادة الهيكلة في CSS تعني تحسين البنية دون تغيير النتيجة المرئية. في هذا الدرس، ستأخذ مجموعة صغيرة من القواعد المتكررة وتعيد تنظيمها لتصبح أنماطًا أنظف وأسهل في الصيانة. الهدف هو ملاحظة متى تنتمي التصريحات إلى أداة مساعدة مشتركة، ومتى يستحق المكون محددًا خاصًا به، وكيف يمكن للخصائص المخصصة (custom properties) أن تقلل من التكرار. بحلول النهاية، يجب أن تكون قادرًا على النظر إلى ورقة أنماط فوضوية وتحويلها إلى شيء أكثر اتساقًا وقابلية للقراءة وأكثر أمانًا للتوسيع.
أين تضع الكود
- ابدأ بالمتغيرات والمدخلات. ضع قواعد الأنماط في محددات الفئات القابلة لإعادة الاستخدام.
- أضف منطق المعالجة في القسم الأوسط.
- اختتم بالمخرجات والتحقق السريع.
مرجع الأوامر
- ابدأ بإيجاد التصريحات التي تظهر أكثر من مرة وقم بتجميعها بشكل مقصود.
- انقل قيم التباعد أو الحدود أو الألوان المتكررة إلى خصائص مخصصة (custom properties) عندما تكون مرتبطة بوضوح.
- تحقق من الصفحة قبل وبعد إعادة الهيكلة للتأكد من أن التصميم لا يزال يبدو كما هو.
- اكتب سببًا واحدًا يجعل محدداتك المحدثة أسهل في الصيانة من الإصدار الأصلي.
دليل خطوة بخطوة
- اقرأ ملف CSS الأولي وحدد أي قيم متكررة أو أنماط محددات متكررة.
- اختر إعادة هيكلة واحدة أولاً، مثل دمج أنماط البطاقات المكررة أو استخراج متغير مشترك.
- أعد تشغيل الصفحة وتأكد من أن النتيجة المرئية لم تتغير عن طريق الخطأ.
- راجع البنية الجديدة وقرر ما إذا كانت أسماء المحددات لا تزال منطقية لشخص آخر يقرأ الملف.
- اختتم بقائمة تحقق قصيرة: تكرار أقل، تسمية أوضح، نفس المخرجات.
تمارين تطبيقية
- أعد هيكلة ورقة أنماط زر تكرر نفس قواعد `padding` و`border radius` و`font` في ثلاثة فئات.
- خذ مجموعة من أنماط التنبيه واستخرج القواعد المشتركة مع إبقاء متغيرات النجاح والخطأ منفصلة.
- أعد كتابة ورقة أنماط صغيرة بحيث تأتي قيم التباعد من المتغيرات بدلاً من الأرقام المكتوبة يدويًا.
تحديات برمجية
- أنشئ عمليتي إعادة هيكلة صالحتين لنفس ورقة الأنماط وقارن أيهما أسهل للتوسيع لاحقًا.
- أعد هيكلة مكون دون زيادة خصوصية المحدد أو جعل التجاوزات (overrides) أصعب.
مهام تمرين صغيرة
- أعد تسمية محدد واحد بحيث يكون غرضه أوضح للوهلة الأولى.
- استخرج قيمة متكررة واحدة إلى خاصية مخصصة (custom property).
- لخص الفائدة الرئيسية لإعادة الهيكلة الخاصة بك في جملة واحدة.
خطأ شائع
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.