لمدة عقد من الزمن، كان SASS هو الملك. لقد حددنا $brand-color: #ff0000;. قمنا بتجميعها. لكن متغيرات SASS بها عيب فادح: تموت أثناء وقت الترجمة. بمجرد وصول CSS إلى المتصفح، يختفي المتغير. إنه مجرد رمز سداسي عشري ثابت. لا يمكنك تغييره باستخدام JavaScript. لا يمكنك توسيع نطاقه إلى عقدة DOM محددة.

أدخل خصائص CSS المخصصة (المتغيرات). --لون العلامة التجارية: #ff0000;. هذه ليست مجرد “متغيرات”. إنها خصائص DOM. أنها تتالي. إنهم على قيد الحياة. في Maison Code Paris، نستخدمها كطبقة أساسية لكل نظام تصميم نبنيه.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

1. استراتيجية الطبقات الدلالية

يقوم المبتدئون بتعيين المتغيرات مباشرة إلى الألوان. --أزرق: #0000ff; يقوم الخبراء بتعيين المتغيرات إلى النية.

نحن نستخدم بنية ثلاثية الطبقات:

الطبقة الأولى: البدائيون (اللوحة)

هذا هو صندوق الطلاء الخام الخاص بك. ليس لها معنى، مجرد قيم.

:الجذر {
  --palette-blue-100: #ebf8ff;
  --palette-blue-500: #4299e1;
  --palette-blue-900: #2a4365;
  --لوحة محايدة-900: #1a202c;
  --palette-white: #ffffff;
}

الطبقة الثانية: علم الدلالات (الرمز المميز)

يؤدي هذا إلى تعيين اللوحة لغرض محدد.

:الجذر {
  --bg-primary: var(--palette-white);
  --bg-ثانوي: var(--palette-blue-100);
  --text-body: var(--palette-neutral-900);
  --action-primary: var(--palette-blue-500);
  --action-primary-hover: var(-palette-blue-900);
}

الطبقة 3: المكون (الاستخدام)

التحقق من أحد المكونات.

.btn-الابتدائي {
  لون الخلفية: var(--action-primary);
  اللون: فار(--bg-primary);
}

لماذا؟ إذا قررت العلامة التجارية أن “الإجراء الأساسي أصبح الآن أرجوانيًا”، فيمكنك تغيير سطر واحد في الطبقة الثانية. أنت لا تقوم بـ grep/sed قاعدة التعليمات البرمجية بأكملها.

2. السمات الديناميكية (الوضع الداكن)

نظرًا لأن متغيرات CSS يتم حلها في وقت التشغيل، فإن تنفيذ الوضع الداكن يعد أمرًا تافهًا. يمكنك ببساطة إعادة تعريف الطبقة الثانية داخل سمة البيانات.

[موضوع البيانات = "الظلام"] {
  --bg-primary: var(--palette-neutral-900);
  --bg-ثانوي: var(--palette-black);
  --text-body: var(--palette-white);
}

عندما تقوم بتبديل السمة إلى <body>، يُعاد رسم الموقع بأكمله على الفور (بمعدل 60 إطارًا في الثانية) لأن المتصفح يقوم فقط بتبديل المؤشرات. لا يلزم إعادة تحميل ورقة الأنماط.

3. تحديد النطاق والعزل

المتغيرات تخضع للشلال. وهذا يسمح بـ تصميم سياقي قوي. تخيل “قسمًا مظلمًا” في منتصف الصفحة المضيئة.

.القسم المقلوب {
  --text-body: var(--palette-white);
  --bg-primary: var(--palette-neutral-900);
}

أي مكون (بطاقة، زر، نص) يتم وضعه داخل .section-inverted سوف يتبنى بطبيعته القيم “Dark”، حتى لو كانت بقية الصفحة فاتحة. رمز المكون لا يتغير. إنه يستهلك فقط المتغير من أقرب أصل له.

4. تفاعل جافا سكريبت: تتبع الماوس

يمكنك قراءة/كتابة المتغيرات من JS. يؤدي ذلك إلى تمكين تأثيرات واجهة المستخدم عالية الأداء دون إعادة عرض React.

تأثير تسليط الضوء على “متابعة المؤشر”:

document.addEventListener('mousemove', (e) => {
  const x = e.clientX;
  const y = e.clientY;
  document.body.style.setProperty('-mouse-x', `${x}px`);
  document.body.style.setProperty('-mouse-y', `${y}px`);
});

.تسليط الضوء {
  الخلفية: التدرج الشعاعي (
    دائرة في var(-mouse-x) var(-mouse-y),
    رغبا (255، 255، 255، 0.2)،
    شفاف 150 بكسل
  );
}

يتم تشغيل هذا بالكامل على مؤشر ترابط CSS Compositor (في الغالب).

5. التكامل مع Tailwind CSS

نحن نحب الرياح الخلفية. لكن القيم السداسية ذات الترميز الثابت في “tailwind.config.js” هي نمط مضاد. قم بربط Tailwind بالطبقة الدلالية الخاصة بك.

// tailwind.config.js
وحدة التصدير = {
  الموضوع: {
    الألوان: {
      // استخدم متغير CSS، وليس Hex
      الأساسي: 'var(--action-primary)',
      الخلفية: 'var(--bg-primary)',
      النص: "فار(-نص-النص)"،
    }
  }
}

الآن يُنشئ bg-primary .bg-primary { لون الخلفية: var(-action-primary) }. يمكنك الحصول على سير عمل الأداة المساعدة، ولكنك تحافظ على مرونة وقت التشغيل.

6. مخاطر الأداء

التغييرات الجذرية للنطاق: يؤدي تغيير متغير على :root إلى تشغيل إعادة حساب النمط لـ شجرة DOM بأكملها. إنه سريع، لكن القيام بذلك في حدث “التمرير” أمر محفوف بالمخاطر. تفضيل تغييرات النطاق على حاويات محددة.
تعقيد calc(): width: calc(var(--a) * var(--b) + 10px) يفرض على المتصفح إجراء العمليات الحسابية في كل إطار إذا تغيرت المتغيرات. استخدم باعتدال.

7. أداء `calc()` مقابل أداء محسوب مسبقًا

متصفح Math سريع، ولكنه ليس مجانيًا. يتم تشغيل width: calc(var(--a) * var(--b)) في كل عملية إعادة حساب للتخطيط. إذا كان لديك 10000 عقدة تقوم بذلك، سينخفض معدل 60 إطارًا في الثانية إلى 30 إطارًا في الثانية. التحسين: إذا كانت القيمة ثابتة لأحد المكونات، فقم بحسابها مسبقًا في JS أو SASS إن أمكن. استخدم متغيرات CSS لـ القيم التي تتغير في وقت التشغيل (الموضوع، الأبعاد، تكوين المستخدم). لا تستخدمها فقط لتجنب كتابة الأرقام.

8. استخدام المتغيرات لحالات الرسوم المتحركة

بدلاً من تحريك “التحويل”، قم بتحريك متغير.

بطاقة {
  تحويل: ترجمةY(var(--y, 0)) مقياس(var(--s, 1));
  الانتقال: --y 0.2s، --s 0.2s؛
}
.بطاقة:تحوم {
  --y: -10px;
  --s: 1.05؛
}

وهذا أنظف من إعادة تعريف سلسلة “التحويل” بأكملها. كما يسمح أيضًا بالرسوم المتحركة المستقلة (على سبيل المثال، يقوم JS بتحديث --y بينما يقوم CSS بتحديث --s). فهو يقلل من الحمل الزائد “CSS String Parsing” للمتصفح.

9. الاستراتيجيات الاحتياطية

بالنسبة للمكتبات الهامة، قم دائمًا بتوفير بديل. اللون: var(--text-body, black); إذا قام المستخدم بتحميل المكون الخاص بك ولكنه نسي تضمين Design System CSS، فسيظل يظهر باللون الأسود، وليس غير مرئي.

9. استعلامات الحاوية: المتغيرات السياقية

استعلامات الوسائط (@media (min-width: 768px)) تستعلم عن الشاشة. استعلامات الحاوية (@container (العرض الأدنى: 300px)) تستعلم عن الأصل. وهذا يغير طريقة تفكيرنا في المتغيرات. يمكن للبطاقة أن تقول: “إذا كانت حاويتي صغيرة، --الحشوة: 1rem. وإذا كانت حاويتي كبيرة، --الحشوة: 2rem.” وهذا يجعل المكونات محمولة حقًا. يمكنك إسقاط “بطاقة المنتج” في الشريط الجانبي (صغير) أو الشبكة الرئيسية (كبيرة)، وتقوم بتكييف منطقها الداخلي دون تجاوزات خارجية.

10. نموذج كائن CSS المكتوب (هوديني)

ماذا لو كان بإمكانك التحقق من نوع متغيرات CSS الخاصة بك؟ CSS.registerProperty({ name: '--brand-color'، بناء الجملة: '<color>'، القيمة الأولية: 'black'، يرث: صحيح }) هذا هو ** هوديني **. يخبر المتصفح: “—لون العلامة التجارية هو لون”. إذا حاولت ضبطه على “10px”، فسيتجاهله المتصفح. والأهم من ذلك، يمكن للمتصفح الآن تحريكه بشكل صحيح لأنه يعرف أنه لون (استيفاء قيم RGB)، وليس مجرد سلسلة.

12. هوديني: الغوص العميق

هوديني لا يقتصر فقط على الأنواع. يتعلق الأمر بـ الأداء. عندما تقوم بتحريك متغير قياسي، يقوم المتصفح بمعالجة السلسلة في كل إطار. "10px" -> "11px" -> "12px". باستخدام CSS.registerProperty، يتم إجراء استيفاء سريع للتعويم. 10.0 -> 11.0 -> 12.0. يؤدي هذا إلى نقل العمل من الموضوع الرئيسي إلى مؤشر الترابط. تظل الرسوم المتحركة سلسة حتى لو قامت React بحظر الخيط الرئيسي بمهمة ترطيب ثقيلة.

13. قاعدة @property (تدقيق المستقبل)

لقد ذكرنا هوديني. وهو الآن مستقر في Chrome.

@property --زاوية التدرج {
  بناء الجملة: '<زاوية>'؛
  القيمة الأولية: 0deg؛
  يرث: كاذب؛
}

الآن يمكنك تحريك التدرجات! تدوير الإطار الرئيسي { إلى { --زاوية التدرج: 360 درجة؛ } } الخلفية: تدرج مخروطي (من var(-زاوية التدرج)، أحمر، أزرق)؛ وكان هذا مستحيلا من قبل. كان عليك استخدام JS/Canvas. الآن أصبح CSS أصليًا. يؤدي هذا إلى فتح رسوم متحركة معقدة بمعدل 60 إطارًا في الثانية على أداة التركيب.

14. لماذا ميزون كود؟

في Maison Code، نقوم بشحن أنظمة التصميم، وليس مواقع الويب فقط. نحن نحدد الرموز المميزة لعلامتك التجارية في JSON (Figma). نقوم بتصديرها إلى متغيرات CSS تلقائيًا. نحن نضمن أن الوضع المظلم الخاص بك ليس فكرة لاحقة، بل مواطن من الدرجة الأولى. نحن نبني بنيات تتيح لك إعادة تسمية موقعك بالكامل في 5 دقائق عن طريق تغيير بعض الرموز السداسية. نحن نقدر قابلية الصيانة بقدر ما نقدر الجماليات.

14. قائمة مراجعة متغيرات CSS

قبل شحن نظام التصميم الخاص بك:

15. الاستنتاج

تعد متغيرات CSS الأداة الأكثر أهمية لتوسيع نطاق بنية الواجهة الأمامية. إنها تسد الفجوة بين “التصميم” (رموز Figma) و”الرمز” (CSS). إذا كنت لا تستخدمها، فأنت لا تقوم ببناء نظام. أنت فقط ترسم الصفحات. إيقاف القيم السداسية الثابتة. ابدأ بالتفكير في الرموز.

فوضى نظام التصميم؟

هل CSS الخاص بك في حالة من الفوضى ”!مهم”؟

تصميم نظام التصميم. قم بتوظيف مهندسينا.