0Pricing
React Academy · درس

خيارات التنسيق: CSS Modules والأنماط المضمّنة ومساعدات الأصناف

قارن بين الأنماط المضمّنة، وclassName مع CSS (بما في ذلك مفهوم CSS Modules)، وأدوات المساعدة للأصناف الخاصة بالتنسيق الشرطي.

خيارات التنسيق: CSS Modules والأنماط المضمّنة ومساعدات الأصناف درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.

نظرة عامة على التنسيق

الهدف: نسّق مكوّنات React باستخدام الأنماط المضمّنة، وCSS عبر className، ومساعدات الأصناف؛ وافهم موضع CSS Modules.

أساسيات الأنماط المضمّنة

تستخدم الأنماط المضمّنة كائنات: style={{ color: "red" }}. وهي مناسبة للقيم الصغيرة الديناميكية؛ لكنها محدودة مع :hover أو الاستعلامات الإعلامية.

عرض توضيحي: الأصناف والنمط المضمّن والمساعد

استخدم className للتنسيقات القابلة لإعادة الاستخدام، والنمط المضمّن للتعديلات الديناميكية الصغيرة؛ وتجمع أداة مساعدة الأصناف بصورة شرطية.


<div id="root"></div>

CSS Modules (مفهوم)

تجعل CSS Modules أسماء الأصناف محصورة في ملف واحد (مثل Button.module.css)، بحيث لا يتعارض .btn من وحدة مع غيره.

  • استوردها ككائن (مثل styles.btn).
  • وهي مناسبة جدًا للتطبيقات متوسطة الحجم.

نمط مساعدات الأصناف

تبني مساعدات الأصناف سلاسل الأصناف استنادًا إلى props أو الحالة (مثل cx("btn", primary && "primary")).

  • أنماط مختلفة واضحة
  • قواعد شرطية صغيرة

نصائح التنسيق

نصائح:

  • استخدم الأصناف (أو الوحدات) لإعادة الاستخدام و:hover والتصميم المتجاوب.
  • استخدم الأنماط المضمّنة للقيم الديناميكية الصغيرة.
  • حافظ على بساطة منطق المساعد وسهولة قراءته.

اختيار الأصناف أم النمط المضمّن

متى ينبغي تفضيل className (أصناف CSS) على الأنماط المضمّنة في React؟

مراجعة

مراجعة: استخدم className/CSS (أو CSS Modules) لإعادة الاستخدام والقواعد المتجاوبة؛ وأضف الأنماط المضمّنة للتعديلات الديناميكية الصغيرة؛ واستخدم مساعد أصناف للأنماط المختلفة الشرطية.

الأسئلة الشائعة

هل درس «خيارات التنسيق: CSS Modules والأنماط المضمّنة ومساعدات الأصناف» مجاني؟

نعم — نص درس «خيارات التنسيق: CSS Modules والأنماط المضمّنة ومساعدات الأصناف» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.

ماذا ستتعلم في «خيارات التنسيق: CSS Modules والأنماط المضمّنة ومساعدات الأصناف»؟

قارن بين الأنماط المضمّنة، وclassName مع CSS (بما في ذلك مفهوم CSS Modules)، وأدوات المساعدة للأصناف الخاصة بالتنسيق الشرطي. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.

كم من الوقت يستغرق درس «خيارات التنسيق: CSS Modules والأنماط المضمّنة ومساعدات الأصناف»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. قواعد JSX: التعبيرات والسمات وFragments
  2. القوائم والمفاتيح؛ والتصيير الشرطي
  3. خيارات التنسيق: CSS Modules والأنماط المضمّنة ومساعدات الأصناف
← العودة إلى React Academy