GitHub يشرح انتقاله إلى CSS Modules: الأداء يتجاوز حجم الملف

نشر GitHub في 25 سبتمبر 2026 تقريراً هندسياً عن انتقال github.com من CSS-in-JS إلى CSS Modules. وقال فريق Primer إن الموقع وصل إلى تشغيل CSS Modules بنسبة 100% في يونيو 2026، بعد عملية تدريجية استمرت سنوات.

يحمل التقرير عنواناً مقصوداً: «تحسين أداء الموقع عبر شحن CSS أكثر». الفكرة ليست زيادة الملفات بلا حدود، بل أن إرسال CSS جاهز مع الصفحة قد يكون أقل كلفة من توليد الأنماط ومعالجتها عبر JavaScript أثناء التشغيل.

أين ظهرت مشكلة CSS-in-JS؟

بحسب GitHub، بدأت أعداد المكوّنات ترتفع بشدة في بعض الصفحات منذ 2023. أدى ذلك إلى وقت أطول لتهيئة الأنماط في المتصفح، وتراجع أداء server-side rendering، وزيادة كلفة تحديث الأنماط كلما زاد عدد المكوّنات.

تسمح CSS Modules بكتابة الأنماط في ملف CSS بجوار مصدر JavaScript للمكوّن، مع جعل أسماء الفئات محلية افتراضياً لتقليل تعارض المحددات العامة. والأهم في هذه الحالة أنها أزالت الحاجة إلى سلوك runtime على العميل أو الخادم لتوليد تلك الأنماط؛ إذ تُجمع القواعد في أوراق CSS وتُرسل مع الصفحة.

هجرة محكومة بالاختبارات

لم يغيّر GitHub كل المكوّنات دفعة واحدة. أضاف الفريق ملف CSS Modules لكل مكوّن، ثم وضع feature flag للتبديل بين التنفيذ القديم والجديد. واستُخدمت اختبارات visual regression لمقارنة اللقطات والتأكد من تطابق المظهر.

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

كيف نقرأ أرقام الأداء؟

تقول الشركة إنه بعد تحويل مكوّنات Primer بحلول نهاية 2024 انخفض وقت server-side rendering بنسبة 55%، وانخفض وقت تهيئة المكوّنات في الصفحة بنسبة 25%. هذه قياسات GitHub ضمن بنيته الخاصة، وليست معياراً عاماً يضمن النتيجة نفسها لأي موقع.

كما أن العمل لم يكن مجرد تغيير في الصياغة. احتاج الفريق إلى إزالة sx وstyled-components وstyled-system من الموقع، وفصل نظام الثيمات — الذي يدعم سبعة ثيمات مع أوضاع تباين مرتفع — عن اعتماده السابق على JavaScript.

الدرس للمشروعات الأخرى

قبل الاختيار بين CSS-in-JS وCSS Modules، ينبغي قياس كلفة runtime وSSR والتخزين المؤقت وحجم الملفات وتنظيم الفريق وأدوات الاختبار معاً. لا يمكن نسخ نتيجة GitHub من دون قياسات محلية.

الجزء الأكثر قابلية لإعادة الاستخدام هو منهج الهجرة نفسه: خطوات صغيرة، وfeature flags، واختبارات بصرية، وقياس قبل التغيير وبعده. بهذه الأدوات يمكن تغيير طبقة أساسية في الواجهة من دون تحويل المشروع إلى إطلاق واحد عالي المخاطر.

المصادر

• GitHub Engineering: تحسين الأداء عبر شحن CSS أكثر
• توثيق مشروع CSS Modules