CSS-في-JS

'CSS-in-JS' هو تدفق بدأ من المكونات المصممة ويحدد التصميم داخل Javascript.

المكونات المصممة، العاطفة، المانتين، إلخ.

استحقاق

1. النطاق المطبق صغير.
   1. إذا كنت تستخدم وحدة CSS، فيمكنك أيضًا تقليل نطاق CSS
2. تم تعريفه في نفس مكان المكون. (الموقع)
3. يمكن استخدام متغير جافا سكريبت.

عيب

1. الحمل الزائد لوقت التشغيل
2. يجب عليك تنزيل ملف مكتبة Css في JS.
   1. حجم العاطفة 7.9 كيلو بايت.
   2. حجم مانتين هو 134 كيلو بايت!

الجانب السلبي ضخمة

1. يؤدي إدخال قواعد CSS بشكل متكرر إلى الكثير من العمل الحسابي.
   1. مقارنة العاطفة وCSS
   2. عند استخدام CSS، كانت هناك زيادة في الأداء بحوالي 50%.
2. عند استخدام SSR، تنشأ مجموعة متنوعة من المشكلات.
   1. إذا نظرت إلى مستودع العاطفة، فهناك العديد من المشكلات.

مقارنة الأداء في العالم الحقيقي

لقد قمنا بقياس الأداء من خلال مقارنة CSS-in-JS وTailwind باستخدام التعليمات البرمجية المستخدمة فعليًا في الإنتاج.

يثبت

يستخدم CSS-in-JS Mantine (استنادًا إلى العاطفة).
يستخدم قياس الأداء أداة React dev.
هدف قياس الأداء هو جدول 30 * 5 (اسم المكون: SheetTable).

شاشة

تقدم التجربة

عند الضغط على زر

، تظهر الشاشة أعلاه.
• قم بتشغيل التسجيل في React Profiler واضغط على الزر لتسجيل عرض الشاشة
• يقيس وقت عرض SheetTable.
• قم بإجراء ما مجموعه 5 مرات للحصول على المتوسط.
CSS-في-JS (مانتين)

الريح الخلفية

نتيجة

تم تقليل وقت العرض بحوالي 36%.

• حتى من خلال تغيير رمز خلية واحد فقط، تحسن الأداء بشكل ملحوظ. (طبعا أغلبها خلايا)
• على شاشة 60 هرتز، يكون الإطار الواحد 16 مللي ثانية، ولكن 3 إطارات -> إطارين

خاتمة

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

• استخدم Tailwind ما لم تكن بحاجة إلى استخدام متغيرات JS.
• (إضافي) لتقديم SSR، من المناسب التخلي عن CSS-in-JS.
• المرجع

[1] https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b