CSS في React: className والـ style وCSS Modules وTailwind

تُنسَّق مكوّنات React بـ CSS العادية. أعطِ العناصر صنفًا بالـ prop المسماة className واكتب القواعد في ورقة أنماط، واستخدم الـ prop المسماة style للقيم الآتية من JavaScript، والجأ إلى CSS Modules أو Tailwind عندما يكبر المشروع. يعرّف المثال أدناه CSS الخاصة به في عنصر <style> ليتمكن من العمل في هذه الصفحة؛ أما في مشروع فستكون في ملف .css.

export default function App() {
    return (
        <div>
            <style>{`
                .card { border: 1px solid #ddd; border-radius: 10px; padding: 16px; max-width: 280px; }
                .card-title { margin: 0 0 8px; font-size: 18px; }
                .btn { background: #2563eb; color: white; border: 0; border-radius: 6px; padding: 8px 14px; }
            `}</style>
            <div className="card">
                <h3 className="card-title">Pro plan</h3>
                <p>Unlimited lessons and projects.</p>
                <button className="btn">Upgrade</button>
            </div>
        </div>
    );
}

غيّر #2563eb إلى #16a34a في القاعدة .btn فيتحول الزر إلى الأخضر. كل ما تعرفه عن CSS ينطبق: المحددات واستعلامات الوسائط وحالات التمرير والحركات.

className لا class

تتحول JSX إلى JavaScript، حيث class كلمة محجوزة، لذا تستخدم React الاسم className، وهو الاسم الذي يستخدمه DOM نفسه لهذه الخاصية (element.className). ما زال المتصفح يستقبل سمة class عادية. وتنطبق إعادة التسمية نفسها على htmlFor بدلًا من for في التسميات. تقبل React 19 الاسم class مع تحذير أثناء التطوير، لكن className هو الاسم الصحيح وهو ما يستخدمه كل مشروع.

تأخذ className نصًا، فتُفصل الأصناف المتعددة بمسافات: className="btn btn-primary". ولأن القيمة JavaScript، يمكن حسابها.

الأصناف الشرطية

لإضافة صنف في بعض الحالات فقط، ابنِ النص بمعامل ثلاثي أو بقالب نصي. شريط التبويبات الذي يميّز التبويب المحدد هو الحالة الكلاسيكية.

import { useState } from 'react';

const TABS = ['Overview', 'Lessons', 'Reviews'];

export default function App() {
    const [active, setActive] = useState('Overview');

    return (
        <div>
            <style>{`
                .tab { border: 0; background: none; padding: 8px 12px; border-bottom: 2px solid transparent; }
                .tab.active { border-bottom-color: #2563eb; color: #2563eb; font-weight: 600; }
                .tab.disabled { color: #aaa; }
            `}</style>
            {TABS.map((tab) => (
                <button
                    key={tab}
                    className={`tab ${tab === active ? 'active' : ''} ${tab === 'Reviews' ? 'disabled' : ''}`}
                    disabled={tab === 'Reviews'}
                    onClick={() => setActive(tab)}
                >
                    {tab}
                </button>
            ))}
            <p>Showing: {active}</p>
        </div>
    );
}

انقر Lessons فينتقل الخط السفلي، لأن نص ذلك الزر وحده يحتوي الآن على active. يحصل Reviews على الصنف disabled والسمة disabled، فيكون رماديًا ويتجاهل النقرات. يترك القالب النصي مسافات زائدة عندما يكون الشرط خاطئًا، وتتجاهلها المتصفحات. وعندما يحتوي مكوّن على أصناف شرطية كثيرة، تكون المصفوفة أكثر ترتيبًا:

const classes = ['tab', isActive && 'active', isDisabled && 'disabled']
    .filter(Boolean)
    .join(' ');

تستخدم مشاريع كثيرة الحزمة الصغيرة clsx للمهمة نفسها: clsx('tab', { active: isActive, disabled: isDisabled }).

الـ prop المسماة style

تأخذ الـ prop المسماة style كائن JavaScript، لا نصًا. ولهذا فيها أقواس مزدوجة: الزوج الخارجي يفتح تعبير JavaScript، والزوج الداخلي هو الكائن نفسه. أسماء الخصائص بنمط camelCase (backgroundColor وfontSize وborderRadius)، والقيم نصوص أو أرقام. الرقم في خاصية طول يصبح بكسلات، فيعني padding: 12 القيمة 12px.

تتألق الأنماط المضمّنة عندما تُحسب القيمة وقت العرض، مثل عرض شريط التقدم.

import { useState } from 'react';

export default function App() {
    const [percent, setPercent] = useState(30);
    const done = percent >= 100;

    return (
        <div style={{ maxWidth: 320 }}>
            <div style={{ height: 12, background: '#e5e7eb', borderRadius: 6, overflow: 'hidden' }}>
                <div
                    style={{
                        width: percent + '%',
                        height: '100%',
                        backgroundColor: done ? '#16a34a' : '#2563eb',
                        transition: 'width 0.3s',
                    }}
                />
            </div>
            <p style={{ fontSize: 14, opacity: 0.8 }}>{percent}% complete</p>
            <button onClick={() => setPercent(Math.min(100, percent + 10))}>Add 10%</button>{' '}
            <button onClick={() => setPercent(0)}>Reset</button>
        </div>
    );
}

انقر Add 10% حتى يمتلئ الشريط فيتحول إلى الأخضر. لاحظ width: percent + '%': الرقم المجرد يعني البكسلات، لذا توضع الوحدات غير px في نص. والخصائص التي لا وحدة لها تبقى أرقامًا مجردة، مثل opacity: 0.8 وzIndex: 2 وflexGrow: 1 وlineHeight: 1.5 (وهي معامل ضرب لا بكسلات).

للأنماط المضمّنة حدود. لا تستطيع التعبير عن :hover و:focus واستعلامات الوسائط وحركات keyframe، ويحمل كل عنصر نسخته الخاصة من القواعد. استخدمها للقيم الديناميكية واترك الباقي في CSS.

متغيرات CSS من props

حل وسط جيد هو ضبط خاصية CSS مخصصة في style واستخدامها من ورقة الأنماط. تبقى القواعد في CSS، بما فيها حالات التمرير، ولا تأتي إلا القيمة من JavaScript.

import { useState } from 'react';

export default function App() {
    const [accent, setAccent] = useState('#2563eb');

    return (
        <div style={{ '--accent': accent }}>
            <style>{`
                .pill { border: 2px solid var(--accent); color: var(--accent); background: none;
                        border-radius: 999px; padding: 6px 14px; }
                .pill:hover { background: var(--accent); color: white; }
            `}</style>
            <label>
                Accent color <input type="color" value={accent} onChange={(e) => setAccent(e.target.value)} />
            </label>
            <p>
                <button className="pill">Follow</button> <button className="pill">Share</button>
            </p>
        </div>
    );
}

اختر لونًا جديدًا فيتبعه الزران كلاهما، ويظل تلوين التمرير يعمل لأنه CSS عادية. تحتفظ أسماء الخصائص المخصصة بشرطاتها في كائن style، فتوضع بين علامتي تنصيص: { '--accent': accent }.

ملفات CSS

في مشروع حقيقي تكتب الأنماط في ملفات .css وتستوردها من المكوّن الذي يحتاجها. مع Vite يكفي الاستيراد: ترى أداة البناء import './Button.css'، فتضيف ورقة الأنماط إلى الصفحة أثناء التطوير، وتجمعها في ملف CSS للإنتاج. لا يوجد تصدير لتستخدمه؛ فالاستيراد موجود لأثره الجانبي فقط.

// Button.jsx
import './Button.css';

export default function Button({ children }) {
    return <button className="button">{children}</button>;
}

/* Button.css */
.button {
    background: #2563eb;
    color: white;
    border-radius: 6px;
}

المشكلة أن كل ورقة أنماط مستوردة عامة. القاعدة .button في Button.css تنسّق كل عنصر بهذا الصنف، في أي مكان من التطبيق، وملفان يعرّفان كلاهما .title يكتب أحدهما فوق الآخر. تتعامل الفرق مع هذا باصطلاحات تسمية مثل BEM (.card__title)، أو بـ CSS Modules.

CSS Modules

الملف الذي ينتهي بـ .module.css هو CSS Module. استيراده يعطيك كائنًا يربط كل اسم صنف كتبته باسم فريد مولّد، فلا ينطبق الصنف إلا حيث تستخدمه. يدعم Vite وNext.js ذلك دون أي إعداد.

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

export default function Card({ title, children, featured }) {
    return (
        <section className={featured ? `${styles.card} ${styles.featured}` : styles.card}>
            <h3 className={styles.title}>{title}</h3>
            {children}
        </section>
    );
}

/* Card.module.css */
.card { border: 1px solid #ddd; border-radius: 10px; padding: 16px; }
.featured { border-color: #2563eb; }
.title { margin: 0; }

في المتصفح يظهر الصنف بشكل مثل _card_1x2ab_1. يمكن لمكوّن آخر أن يعرّف .title خاصًا به ولا يتعارض الاثنان أبدًا. تكتب CSS عادية، بما فيها قواعد التمرير واستعلامات الوسائط، ولهذا تُعد CSS Modules خيارًا افتراضيًا شائعًا لأنماط المكوّنات.

Tailwind CSS مع React

يتبع Tailwind نهجًا مختلفًا: بدلًا من كتابة القواعد، تركّب أصنافًا خدمية صغيرة مباشرة في className. يضبط px-4 الحشوة الأفقية، ويدوّر rounded-lg الزوايا، ويغيّر hover:bg-blue-700 الخلفية عند التمرير. يفحص Tailwind ملفاتك ويولّد CSS للأصناف التي تستخدمها فقط.

إعداده في تطبيق React مع Vite (الإصدار v4 من Tailwind) يتطلب ثلاث خطوات:

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [react(), tailwindcss()],
});

/* src/index.css, imported from main.jsx */
@import "tailwindcss";

ثم نسّق المكوّنات بالأصناف:

function UpgradeCard({ active }) {
    return (
        <div className="max-w-xs rounded-xl border border-gray-200 p-4">
            <h3 className="mb-2 text-lg font-semibold">Pro plan</h3>
            <button
                className={`rounded-md px-4 py-2 text-white ${active ? 'bg-green-600' : 'bg-blue-600 hover:bg-blue-700'}`}
            >
                {active ? 'Active' : 'Upgrade'}
            </button>
        </div>
    );
}

Tailwind غير متاح في محررات هذه الصفحة، لذا يُعرض ككود ثابت. تعمل الأصناف الشرطية تمامًا كما في مثال التبويبات أعلاه، لكن اكتب كل اسم صنف كاملًا: يجد Tailwind الأصناف بفحص نص مصدرك، فالاسم المركّب وقت التشغيل مثل `bg-${color}-600` لا يُولَّد أبدًا.

متى تستخدم أيًا منها

• ملفات CSS العادية تناسب التطبيقات الصغيرة والأنماط العامة (إعادة الضبط والخطوط وتخطيط الصفحة). انتبه لتعارض أسماء الأصناف كلما كبر التطبيق.
• CSS Modules تناسب معظم أنماط المكوّنات: CSS عادية، محصورة النطاق تلقائيًا، دون مكتبة إضافية.
• Tailwind يناسب الفرق التي تفضّل التنسيق داخل الترميز وتريد مقياس تصميم مشتركًا للمسافات والألوان.
• الـ prop المسماة style للقيم المحسوبة وقت العرض: عرض، أو موضع، أو لون اختاره المستخدم. اقرنها بمتغيرات CSS لتُبقي قواعد التمرير والوسائط في CSS.

يمكنك المزج بينها. يحتوي التطبيق المعتاد على ورقة أنماط عامة واحدة، وCSS Modules أو Tailwind للمكوّنات، وبعض الأنماط المضمّنة للقيم الديناميكية. ومكتبات CSS-in-JS مثل styled-components وEmotion خيار آخر ستصادفه في المشاريع الأقدم. تُظهر صفحة تثبيت React كيف تبدأ مشروع Vite تعمل فيه كل هذه الطرق.