Frontend Academy · درس

CSS-in-JS: Styled-components وEmotion

اكتب تنسيقات المكوّنات كقوالب نصية موسومة باستخدام styled-components أو باستخدام خاصية css مع Emotion، واستعمل props للتنسيقات الديناميكية.

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

ما هي CSS-in-JS؟

تكتب CSS-in-JS أنماط المكوّنات مباشرةً في JavaScript/TypeScript. وتكون الأنماط مجاورة للمكوّنات، وتدعم القيم الديناميكية القادمة من الخصائص، كما تُحدَّد نطاقاتها تلقائيًا. وأشهر المكتبات هما styled-components وEmotion.

أساسيات styled-components

استخدم القوالب النصية المعلَّمة لتعريف المكوّنات المنسّقة. والنتيجة مكوّن React يعرض عنصر HTML مطبَّقًا عليه تلك الأنماط.

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? '#6366f1' : 'white'};
  color: ${props => props.primary ? 'white' : '#6366f1'};
  padding: 8px 16px;
  border: 2px solid #6366f1;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
`;

<Button primary>Primary</Button>
<Button>Outline</Button>

‏Emotion — الخاصية css

تطبّق خاصية css في Emotion الأنماط على أي عنصر JSX. وتتطلب توجيه @emotion/react أو الإعداد المسبق لـ Babel.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

function Card({ featured }: { featured?: boolean }) {
  return (
    <div css={css`
      padding: 16px;
      border-radius: 8px;
      border: ${featured ? '2px solid #6366f1' : '1px solid #e2e8f0'};
    `}>
      Content
    </div>
  );
}

الأنماط الديناميكية من الخصائص

يمكن لكلتا المكتبتين قراءة الخصائص لحساب الأنماط. وهذه هي ميزتهما الأساسية مقارنةً بـ CSS الثابتة، إذ لا حاجة إلى تبديل الأصناف.

تطبيق السمات باستخدام ThemeProvider

يدعم كل من styled-components وEmotion مكوّن ThemeProvider الذي يحقن قيم السمة في جميع المكوّنات المنسّقة.

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: '#6366f1', bg: '#f7fafc' }, space: { sm: 8, md: 16 } };

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

// Access in styled component:
const Card = styled.div`
  background: ${props => props.theme.colors.bg};
  padding: ${props => props.theme.space.md}px;
`;

توسيع المكوّنات المنسّقة

وسّع مكوّنًا منسّقًا موجودًا لإنشاء نوع مختلف منه دون تكرار الأنماط.

const Button = styled.button`
  padding: 8px 16px;
  border-radius: 4px;
`;

const DangerButton = styled(Button)`
  background: #e53e3e;
  color: white;
`;

الأنماط العامة

استخدم createGlobalStyle في styled-components أو Global في Emotion لإنشاء CSS عامة، مثل أنماط body وعمليات إعادة الضبط.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font-family: system-ui; }
`;

<><GlobalStyle /><App /></>

تكلفة وقت التشغيل لـ CSS-in-JS

تحقن مكتبات CSS-in-JS الأنماط وقت التشغيل عبر JavaScript. ويضيف ذلك تكلفة على وحدة المعالجة المركزية لتحليل الأنماط وحقنها، إضافةً إلى زيادة حجم حزمة JavaScript. أما البدائل التي لا تحتاج إلى وقت تشغيل، مثل vanilla-extract وlinaria، فتُنشئ CSS ثابتة وقت البناء.

بدائل لا تحتاج إلى وقت تشغيل

vanilla-extract: اكتب الأنماط في TypeScript، ثم تُجمَّع إلى CSS ثابتة. linaria: صياغة CSS-in-JS تُجمَّع إلى CSS Modules. يوفّر كلاهما سهولة استخدام CSS-in-JS دون تكلفة وقت التشغيل.

‏TypeScript مع styled-components

عرّف ThemeType ووسّع الواجهة DefaultTheme من styled-components للحصول على سمات مكتوبة الأنواع بالكامل.

import 'styled-components';
import { theme } from './theme';

declare module 'styled-components' {
  export interface DefaultTheme extends typeof theme {}
}

متى تختار CSS-in-JS

تُعد CSS-in-JS ممتازة للأنماط الديناميكية التي تقودها قيم JavaScript وقت التشغيل، وأنظمة التصميم التي تحتاج بشدة إلى السمات، والفرق التي تفضّل سير عمل يعتمد على JavaScript أولًا. وتكون تكلفة وقت التشغيل مقبولة عادةً في واجهات المستخدم التي لا تتطلب أداءً حرجًا.

تحقق سريع

ما المقابل الرئيسي لاستخدام مكتبات CSS-in-JS وقت التشغيل مقارنةً بحلول CSS الثابتة؟

مراجعة: CSS-in-JS

‏styled-components: قوالب نصية معلَّمة تعرض عنصر React منسّقًا. Emotion: خاصية css أو واجهة styled. تلغي الأنماط الديناميكية من الخصائص الحاجة إلى تبديل الأصناف. يحقن ThemeProvider قيم السمة. استخدم createGlobalStyle لـ CSS العامة. تكلفة وقت التشغيل هي المقابل الرئيسي. البدائل التي لا تحتاج إلى وقت تشغيل: vanilla-extract وlinaria.

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

هل درس «CSS-in-JS: Styled-components وEmotion» مجاني؟

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

ماذا ستتعلم في «CSS-in-JS: Styled-components وEmotion»؟

اكتب تنسيقات المكوّنات كقوالب نصية موسومة باستخدام styled-components أو باستخدام خاصية css مع Emotion، واستعمل props للتنسيقات الديناميكية. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «CSS-in-JS: Styled-components وEmotion»؟

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

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

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

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

منهجية BEM: Block وElement وModifier
وحدات CSS: أسماء الفئات ذات النطاق المحدد
CSS-in-JS: Styled-components وEmotion
نهج Tailwind CSS القائم على الأدوات أولًا

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