CSS Modules

آخر تحديث: 2026-11-03

CSS Modules CSS Modules

تحوّل وحدات CSS ملف CSS عاديًا إلى أنماط ذات نطاق محلي: وقت البناء يُترجَم كل اسم صنف إلى مُعرّف فريد على الصيغة fileName_className_hash، فتكون المكوّنات معزولة طبيعيًا وتختفي تلوّث الأنماط العامة. وفي React تستدعيها عبر كائن styles.xxx، ما يجعل عزل الأنماط حلًا بلا أي تكلفة إضافية للمشاريع المتوسطة والكبيرة؛ لا حاجة لأي شيء إضافي وقت التشغيل.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

/* No install needed — Vite / Create React App support it out of the box */
/* Button.module.css — the file name must end with .module.css */
.title { color: #0969da; }
.active { color: #1a7f37; }

// Button.jsx — class names are referenced through the styles object
import styles from './Button.module.css'

export default function Button() {
  return <button className={styles.title}>Button</button>
}
// styles.title compiles to 'Button_title_x7s2k2', globally unique and conflict-free

القيمة المرجعة：لا قيمة مرتجعة — وحدات CSS حلّ وقت البناء؛ راجع بناء الجملة والمثال لمعرفة طريقة استخدامه.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

محاكاة: يعرض العرض أولًا أسماء الأصناف المُترجَمة (الهاش) لـ styles.card و styles.title، ثم يرسم بطاقة بالأسفل. وعند النقر على زر تفعيل العنوان يُلحَق اسم صنف الهاش active بالعنوان ويُصبَح باللون الأزرق. وفي مشروع حقيقي تحصل أسماء الهاش هذه على أنماطها من ملف .module.css.

💡 النقاط الأساسية

🏷️ المزيد من المنظومة

💡 حالات ذات صلة

📚 دروس ذات صلة

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

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن