وحدات CSS: أسماء الفئات ذات النطاق المحدد
فعّل CSS Modules في مشروع Vite أو webpack لتحديد نطاق أسماء الفئات تلقائيًا بملف المكوّن والقضاء على تسرّب التنسيقات العامة.
وحدات CSS: أسماء الفئات ذات النطاق المحدد درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هي CSS Modules؟
تحوّل CSS Modules أسماء الأصناف وقت البناء لتتضمن تجزئة فريدة، فتقيّد نطاقها بملف المكوّن. ويصبح الصنف المسمى .card مثلًا .card_a1b2c3، ما يجعل تصادمه عرضيًا مع أنماط المكوّنات الأخرى مستحيلًا.
كيفية عمل CSS Modules
استورد ملف CSS ككائن. واستخدم خصائص الكائن بوصفها أسماء أصناف. تتولى أدوات التجميع مثل Vite وwebpack عملية التحويل.
// Button.module.css
.button {
background: #6366f1;
color: white;
padding: 8px 16px;
}
.button--large {
padding: 12px 24px;
}
// Button.tsx
import styles from './Button.module.css';
function Button({ large }: { large?: boolean }) {
return (
<button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
Click me
</button>
);
}أسماء الأصناف الديناميكية باستخدام clsx
تُبسّط مكتبة clsx تركيب أسماء الأصناف الشرطي مع CSS Modules.
import clsx from 'clsx';
import styles from './Button.module.css';
function Button({ variant, disabled }: ButtonProps) {
return (
<button className={clsx(
styles.button,
styles[`button--${variant}`],
disabled && styles['button--disabled']
)}>
...
</button>
);
}CSS العام في CSS Modules
استخدم :global لتعريف الأصناف التي يجب ألا تكون محددة النطاق. وهذا مفيد لتجاوز أصناف مكتبات الجهات الخارجية.
/* Scoped: */
.container { padding: 16px; }
/* Global (not scoped): */
:global(.react-datepicker) {
font-family: inherit;
}التركيب — توسيع الأصناف
تدعم CSS Modules التعليمة composes لتوريث الأنماط من صنف آخر، بما في ذلك الأصناف الموجودة في وحدات أخرى.
/* utilities.module.css */
.flexRow {
display: flex;
align-items: center;
gap: 8px;
}
/* Button.module.css */
.button {
composes: flexRow from './utilities.module.css';
background: #6366f1;
}CSS Modules مقابل الأنماط محددة النطاق في Vue
تمنع الأنماط محددة النطاق في Vue وCSS Modules تسرب الأنماط العامة، لكنهما تختلفان في التنفيذ: تضيف الأنماط محددة النطاق سمات بيانات، بينما تحوّل CSS Modules أسماء الأصناف. كلاهما صالح، كما تعمل CSS Modules مع React أيضًا.
CSS Modules في Vite
يدعم Vite CSS Modules مباشرةً للملفات التي تنتهي بـ .module.css. ولا حاجة إلى إعداد إضافي.
TypeScript مع CSS Modules
ثبّت typescript-plugin-css-modules أو أنشئ ملفات .d.ts لـ CSS Modules باستخدام أداة typed-css-modules للحصول على الإكمال التلقائي لأسماء الأصناف.
اصطلاحات التسمية في CSS Modules
بما أن أسماء الأصناف تصبح خصائص في JavaScript، استخدم صيغة camelCase لأسماء الأصناف في CSS Modules: .buttonPrimary بدلًا من .button-primary، إذ تتطلب الوصلة الوصول باستخدام الأقواس.
متى تستخدم CSS Modules
تُعد CSS Modules خيارًا ممتازًا لتطبيقات React التي تحتاج إلى أنماط محددة نطاق المكوّن، لكن لا تحتاج إلى حل CSS-in-JS متكامل. ويقدم Vite مع CSS Modules حل تنسيق خفيفًا لا يحتاج إلى تنفيذ وقت التشغيل.
CSS Modules مقابل CSS-in-JS
CSS Modules: لا تنفيذ وقت التشغيل، وCSS عادية، وأداء أفضل. أما CSS-in-JS مثل styled-components فتوفّر أنماطًا ديناميكية وقت التشغيل وتعتمد على JavaScript أولًا. وبالنسبة إلى معظم التطبيقات، تكون CSS Modules أبسط وأسرع.
تحقق سريع
ماذا يحدث لاسم صنف CSS عند استخدام CSS Modules؟
مراجعة: CSS Modules
استورد ملفات .module.css ككائنات. تُحدَّد نطاقات أسماء الأصناف تلقائيًا باستخدام تجزئة فريدة. استخدم :global() للأنماط العامة المقصودة. استخدم composes للتوريث بين الوحدات. استخدم clsx لأسماء الأصناف الشرطية. يدعم Vite CSS Modules أصلًا. لا توجد تكلفة تنفيذ وقت التشغيل مقارنةً بـ CSS-in-JS.
الأسئلة الشائعة
هل درس «وحدات CSS: أسماء الفئات ذات النطاق المحدد» مجاني؟
نعم — نص درس «وحدات CSS: أسماء الفئات ذات النطاق المحدد» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «وحدات CSS: أسماء الفئات ذات النطاق المحدد»؟
فعّل CSS Modules في مشروع Vite أو webpack لتحديد نطاق أسماء الفئات تلقائيًا بملف المكوّن والقضاء على تسرّب التنسيقات العامة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «وحدات CSS: أسماء الفئات ذات النطاق المحدد»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- منهجية BEM: Block وElement وModifier
- وحدات CSS: أسماء الفئات ذات النطاق المحدد
- CSS-in-JS: Styled-components وEmotion
- نهج Tailwind CSS القائم على الأدوات أولًا