CSS Academy · درس

CSS Modules: الأنماط ذات النطاق المحدد

حدّد نطاق أسماء الأصناف محليًا للمكوّنات تلقائيًا باستخدام CSS Modules في إعداد البناء الخاص بك.

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

ما هي CSS Modules؟

تحدّد CSS Modules نطاق أسماء أصناف CSS تلقائيًا ليقتصر على ملف المكوّن الذي عُرّفت فيه. ويُحوَّل كل اسم صنف إلى معرّف فريد أثناء عملية البناء، ما يمنع تسرّب الأنماط العامة.

اصطلاح تسمية الملفات

سمِّ ملف CSS بالامتداد .module.css، أو .module.scss عند استخدام Sass:

/* Button.module.css */
.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

استيراد CSS Modules

استورد الوحدة النمطية على هيئة كائن JavaScript. وتصبح أسماء الأصناف خصائص فيه:

import styles from './Button.module.css';

function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)

الأصناف المركبة

استخدم composes لتوسيع صنف من وحدة نمطية أخرى:

/* Button.module.css */
.primary {
  composes: base from "./Base.module.css";
  background: royalblue;
}

الأصناف العامة

استخدم :global() لإلغاء تحديد النطاق المحلي لصنف معيّن:

/* styles.module.css */
.container :global(.third-party-class) {
  /* targets third-party className without scoping */
  color: red;
}

CSS Modules في Vite

يوفّر Vite دعمًا مضمّنًا لـ CSS Modules. وتُعالَج الملفات المطابقة للنمط *.module.css تلقائيًا:

// vite.config.js
export default {
  css: {
    modules: {
      localsConvention: 'camelCase' // .my-class → styles.myClass
    }
  }
}

CSS Modules في webpack

فعّل الوحدات النمطية في إعدادات css-loader:

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]__[local]--[hash:base64:5]'
    }
  }
}

تركيب أسماء الأصناف

ادمج عدة أصناف من الوحدات النمطية باستخدام template literals أو مكتبة clsx/classnames:

import styles from './Card.module.css';
import clsx from 'clsx';

function Card({ featured }) {
  return (
    <div className={clsx(styles.card, featured && styles.featured)}>
      Content
    </div>
  );
}

من دون تكلفة أثناء التشغيل

تُحلَّل CSS Modules بالكامل أثناء عملية البناء، لذلك لا توجد تكلفة إضافية لـ JavaScript أثناء التشغيل. ويكون الناتج CSS قياسيًا مع أسماء أصناف أُعيدت تسميتها. وهذا يجعلها مثالية للتطبيقات الحساسة للأداء.

دعم TypeScript

ولّد تعريفات الأنواع في TypeScript لـ CSS Modules باستخدام typed-css-modules أو إعداد cssModuleTypes في Vite للوصول الآمن إلى أسماء الأصناف من ناحية الأنواع.

CSS Modules مقارنةً بـ CSS-in-JS

مقارنة CSS Modules:

تعمل أثناء البناء فقط، من دون تكلفة JavaScript أثناء التشغيل
تتكامل مع CSS/Sass القياسيين، باستخدام صياغة مألوفة
لا تدعم الأنماط الديناميكية عبر interpolation في JavaScript
أقل مرونة في الأنماط الديناميكية المعتمدة على السمات مقارنةً بـ styled-components/Emotion

تحقق سريع

كيف تمنع CSS Module حدوث تعارض بين أسماء الأصناف في ملفي مكوّنين مختلفين؟

مراجعة

تحدّد CSS Modules نطاق أسماء الأصناف تلقائيًا عبر تحويلها إلى معرّفات فريدة أثناء عملية البناء. استوردها ككائنات JavaScript، ثم وصّل إلى الأصناف بوصفها خصائص. استخدم :global() لإلغاء النطاق المحلي عن المحددات العامة، وcomposes لتركيب الأصناف. إن انعدام التكلفة أثناء التشغيل ودعم صياغة CSS/Sass بالكامل يجعلانها بديلًا خفيفًا لـ CSS-in-JS عند استخدام الأنماط الثابتة.

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

هل درس «CSS Modules: الأنماط ذات النطاق المحدد» مجاني؟

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

ماذا ستتعلم في «CSS Modules: الأنماط ذات النطاق المحدد»؟

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

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

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

كم من الوقت يستغرق درس «CSS Modules: الأنماط ذات النطاق المحدد»؟

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

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

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

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

Styled-components: القوالب النصية الموسومة
Emotion: ‏css() وstyled()
CSS Modules: الأنماط ذات النطاق المحدد
Vanilla Extract: CSS-in-JS بلا وقت تشغيل

← العودة إلى CSS Academy