شرح المفهوم
تتعلق البنية المعمارية في CSS بتحديد مكان الأنماط قبل أن تصبح ورقة الأنماط فوضوية. في هذا الدرس، ستقوم بتنظيم قسم صغير من الصفحة باستخدام الأنماط الأساسية، وأنماط المكونات، ونمط تسمية بسيط بحيث يكون لكل قاعدة وظيفة واضحة. بدلاً من إضافة التصريحات حيثما تبدو مناسبة، ستقوم بتجميعها بطريقة تجعل التعديلات المستقبلية أسهل. يصبح هذا النوع من الهيكل مهمًا بمجرد أن يحتوي المشروع على أكثر من صفحة واحدة أو أكثر من شخص واحد يقوم بتحرير الأنماط.
أين تضع الكود
- ابدأ بالمتغيرات والمدخلات. ضع قواعد الأنماط في مُحدِّدات الفئات القابلة لإعادة الاستخدام.
- أضف منطق المعالجة في القسم الأوسط.
- انتهِ بالمخرجات والتحقق السريع.
مرجع الأوامر
- افصل القيم الأساسية وقواعد المكونات والاختلافات بحيث يكون لكل مجموعة غرض واضح.
- اختبر المُعدِّل المميز وتأكد من أنه يغير المكون دون إعادة كتابة كل خاصية.
- اربط كل مُحدِّد بدوره: `base token`، `component block`، `child element`، أو `modifier`.
- دوّن خيارًا معماريًا واحدًا من شأنه أن يساعد إذا نما المشروع ليشمل عدة بطاقات متشابهة.
دليل خطوة بخطوة
- حدد القواعد التي تُعرّف القيم القابلة لإعادة الاستخدام والقواعد التي تخص مكون بطاقة الملف الشخصي فقط.
- طبق الأنماط على بطاقة عادية وبطاقة مميزة لمقارنة الهيكل والاختلاف.
- أضف عنصرًا فرعيًا جديدًا، مثل وصف، دون كسر نمط التسمية الحالي.
- تحقق من أن المُعدِّل يغير ما هو ضروري فقط ولا يكرر الأنماط الأساسية.
- راجع ورقة الأنماط ولاحظ كيف سيساعد الهيكل عند إضافة المزيد من المكونات لاحقًا.
تمارين تطبيقية
- أنشئ مكونًا ثانيًا، مثل بطاقة إشعار، باستخدام نفس طبقة الـ `token` ولكن بفئات مكونات مختلفة.
- أعد هيكلة البطاقة بحيث يسهل تحديث المسافات والألوان من مكان واحد.
- ابنِ مثالًا صغيرًا ببطاقة أساسية واحدة واثنين من تعديلات المُعدِّل.
تحديات برمجية
- صمم هيكل مكون مصغر للوحة تحكم (dashboard panel) يتضمن عنوانًا وعنوانًا فرعيًا وحالة مميزة.
- قارن ورقة أنماط مسطحة بنهج `token-plus-component` واشرح أيهما أسهل في الصيانة.
مهام تمرين صغيرة
- أضف فئة مُعدِّل واحدة دون تكرار المكون بأكمله.
- أعد تسمية مُحدِّد واحد ليتناسب بشكل أفضل مع دوره في الهيكل.
- لخص البنية المعمارية في جملة واحدة واضحة.
خطأ شائع
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.