CSS Modules و Styled Components في React: تنسيق المكوّنات باحتراف

في React، كل مكوّن هو جزء مستقل من الواجهة. لذلك من المنطقي أن يكون له ستايله الخاص. هنا تظهر طريقتان مشهورتان جدًا: CSS Modules و Styled Components.

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

لماذا نحتاج حلول تنسيق خاصة في React؟

• تفادي تعارض أسماء الأصناف بين المكوّنات.
• تقسيم الستايل بحيث يكون لكل مكوّن ملفه أو تعريفه الخاص.
• سهولة إعادة الاستخدام والتنظيم داخل مشروع كبير.

الفكرة الأساسية: طريقتان شائعتان

1. CSS Modules: ملفات CSS عادية لكن بأسماء معزولة تلقائيًا.
2. Styled Components: كتابة CSS داخل JavaScript كمكوّنات.

أولًا: CSS Modules

الفكرة بسيطة: تكتب CSS عادي في ملف اسمه ينتهي بـ .module.css، ثم تستورد الكلاسات ككائن داخل المكوّن.

/* Button.module.css */
.btn {
  background: #0d6efd;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
}

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

function Button() {
  return <button className={styles.btn}>اضغطني</button>;
}

لاحظ أن styles.btn يصبح اسمًا فريدًا تلقائيًا، مما يمنع تعارض الكلاسات.

ثانيًا: Styled Components

هنا نكتب CSS داخل JavaScript ونحصل على مكوّن جاهز يحمل الستايل.

npm install styled-components

import styled from "styled-components";

const Button = styled.button`
  background: #198754;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
`;

function App() {
  return <Button>اضغطني</Button>;
}

الجميل هنا أنك تحصل على مكوّن جاهز بدل مجرد كلاس. ويمكنك تمرير props لتغيير الستايل بشكل ديناميكي.

const Button = styled.button`
  background: ${(props) => (props.variant === "danger" ? "#dc3545" : "#0d6efd")};
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
`;

متى أستخدم كل واحدة؟

• CSS Modules: مناسب للمشاريع البسيطة أو عندما تريد البقاء قريبًا من CSS التقليدي.
• Styled Components: مناسب عندما تحتاج أنماط ديناميكية وإعادة استخدام قوية للمكوّنات.

مقارنة سريعة

• CSS Modules أسهل وأخف، لكن أقل مرونة في الستايل الديناميكي.
• Styled Components أكثر قوة، لكنها تضيف اعتمادًا إضافيًا إلى المشروع.

أفضل الممارسات

• سمّ الملفات والأصناف بأسماء واضحة مرتبطة بالمكوّن.
• قسّم الستايل حسب المكوّنات بدل تجميع كل شيء في ملف واحد.
• استخدم متغيرات ألوان موحّدة لتناسق التصميم.

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

ما الفرق بين CSS Modules و Styled Components؟

CSS Modules ملفات CSS مع أسماء معزولة، بينما Styled Components يكتب الستايل داخل JavaScript.

متى أستخدم CSS Modules؟

عندما تريد طريقة بسيطة وسريعة مع عزل تلقائي للكلاسات.

متى أستخدم Styled Components؟

عندما تحتاج ستايل ديناميكي يعتمد على props.

هل يمكن استخدامهما معًا؟

ممكن، لكن الأفضل توحيد الأسلوب داخل المشروع.

هل Styled Components تحتاج تثبيت؟

نعم، تحتاج تثبيت حزمة styled-components قبل الاستخدام.