CSS-in-JS ليس سيئًا تلقائيًا.
لقد حل مشاكل حقيقية:
- تطابق النمط على مستوى المكون
- تركيب السمات
- المتغيرات الديناميكية
- تجنب ملفات الأنماط العالمية الكبيرة
تكلفة الأداء هي أن بعض أساليب CSS-in-JS تعمل في وقت التشغيل، وهو ما لا تفعله CSS الثابتة.
هذه هي النقطة التي ينبغي على الفرق تقييمها بصدق.
ليس كل CSS-in-JS متماثل
هناك فئتان عريضة:
- أنظمة وقت التشغيل التي تولد وتحقن الأنماط في المتصفح
- أنظمة وقت التجميع التي تستخرج الأنماط مسبقًا
تلك لها ملفات تعريف أداء مختلفة جدًا.
إذا كانت مكتبتك للنمط تولد القواعد أثناء عملية العرض، فأنت تدفع ثمن ذلك على العميل. إذا تم استخراج أنماطك في وقت البناء، فإن تكلفة وقت التشغيل تكون أقل بكثير.
تلك التمييزات أكثر أهمية من التسمية.
لماذا غالبًا ما يكسب CSS الثابت
CSS الثابت، سواء كان مكتوبًا يدويًا أو مستخرجًا أو أولوياته للمرافق، ينقل المزيد من العمل إلى وقت البناء ويسمح للمتصفح بفعل ما يجيده بالفعل:
- تحميل الأنماط مرة واحدة
- تخزينها مؤقتًا
- تطبيقها بدون محرك نمط JavaScript في المسار الساخن
هذه واحدة من الأسباب التي تجعل Tailwind تبدو بسيطة عمليًا في التطبيقات الكبيرة. الصفقة هي علم وظائف مختلفة، وليست سحرًا.
زاوية React
يمكن أن يؤدي حقن الأنماط في وقت التشغيل إلى تعقيد عملية العرض أيضًا لأن إدخال الأنماط لديه متطلبات ترتيب.
لهذا السبب تكشف React عن useInsertionEffect لمؤلفي مكتبات CSS-in-JS. ليس دليلاً على أن CSS-in-JS معطل. إنه دليل على أن النمط الديناميكي له تكاليف تنسيق تتجنبها CSS الثابتة إلى حد كبير.
قاعدة قرار أكثر فائدة
اختر CSS-in-JS في وقت التشغيل عندما:
- يكون النمط ديناميكيًا للغاية
- تقدر الفريق تلك الوظائف بشكل كبير
- يمكن لميزانية الأداء استيعاب العمل على جانب العميل
اختر CSS الثابت أو المستخرج عندما:
- تهم تكلفة بدء التشغيل
- تشكل الأجهزة المحمولة قيدًا رئيسيًا
- يكون نظام التصميم معروفًا غالبًا في وقت البناء
هذه إحدى الأماكن التي تكون فيها "صفر وقت التشغيل" خاصية ذات مغزى، وليست مجرد عبارة تسويقية.
Tailwind هي إجابة صحيحة واحدة
Tailwind ليست أفضل لأنها عصرية. إنها مفيدة لأنها تحول العديد من قرارات النمط إلى ناتج زمان البناء وسلاسل فئات قابلة للتنبؤ.
إذا كان ذلك يناسب الفريق، فهي صفقة قوية.
إذا لم يكن، يمكن أن توفر لك وحدات CSS المستخرجة أو أساليب وقت التجميع الأخرى مزايا مشابهة في وقت التشغيل دون اعتماد فئات المرافق في كل مكان.
قراءة إضافية