📋 محتويات الصفحة
📖 الوصف
CSS Modules هي طريقة لتنظيم CSS بحيث تكون كل class محلياً scoped للمكون. يتم تحويل `.button` إلى `.Button__button___1xZ3b` تلقائياً لمنع التعارض. يعمل مع Vite, Webpack, Create React App، ومعظم frameworks. CSS Modules يوفر scoped styles بدون CSS-in-JS runtime overhead. يسمح بكتابة CSS عادي في ملفات ...
🎯 يستخدم في
مجالات استخدام هذه الأداة
React applications مع Vite/CRA
Scoped CSS بدون runtime
Projects تحتاج CSS عادي مع encapsulation
Next.js (يدعم افتراضياً)
أي framework يدعم modules
✨ المميزات
أبرز مميزات هذه الأداة
Scoped CSS تلقائياً
Zero runtime overhead
CSS عادي (سهل التعلم)
TypeScript support
متوافق مع جميع build tools
Composition (وراثة الـ styles)
Global styles (عند الحاجة)
Small and fast
⚠️ العيوب
نقاط يجب مراعاتها
أقل ديناميكية من CSS-in-JS
لا dynamic styles بسهولة
يحتاج build support
TypeScript typings قد تحتاج يدوي
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
/* Button.module.css */
.button {
background: #3498db;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background: #2980b9;
}
.primary {
background: #e74c3c;
}
.large {
padding: 16px 32px;
font-size: 18px;
}📚 أدوات أخرى في Styling
قد يعجبك أيضاً
Bootstrap
⭐إطار عمل CSS جاهز (CSS Component Framework)
CSS-in-JS
⭐نهج CSS في JavaScript (CSS-in-JS Concept)
Emotion
⭐مكتبة CSS-in-JS مرنة (Flexible CSS-in-JS Library)
Less
معالج CSS (CSS Preprocessor)
Linaria
مكتبة CSS-in-JS بدون runtime (Zero-Runtime CSS-in-JS)
Panda CSS
مكتبة CSS-in-JS حديثة (Modern CSS-in-JS Framework)