GitHub تنقل واجهتها بالكامل إلى CSS Modules وتتخلص من styled-components

روى مهندسو GitHub كيف استبدلت الشركة تقنية CSS-in-JS بتقنية CSS Modules في واجهة المستخدم. نُشر المقال على مدونة GitHub في 25 سبتمبر 2026، وكتبه مهندسا نظام التصميم Primer، جوش بلاك وماري لوكا، ويوثّق تحسّناً قابلاً للقياس في سرعة العرض.

لماذا صارت طبقة التنسيق عنق زجاجة

بدأت المشكلات في 2023 عندما تضاعف عدد المكوّنات في بعض الصفحات. صار التحميل الأولي للصفحة أبطأ لأن الأنماط كانت تُهيَّأ في المتصفح، وتراجع أداء العرض على الخادم، وأصبح التحكم في تحديثات الأنماط صعباً مع نمو عدد المكوّنات. كان فريق Primer يبحث عن حل يتجنّب تكاليف المتصفح والخادم معاً ويمكن طرحه دون تعطيل GitHub.

CSS Modules وانتقال تدريجي

استقر الفريق على CSS Modules. في هذا الشكل تُكتب الأنماط في ملف CSS إلى جانب شفرة JavaScript للمكوّن، وتكون أسماء الأصناف محلية افتراضياً، ولا حاجة إلى runtime في المتصفح أو الخادم: تتجمّع الأنماط في أوراق أنماط تُرسل مع HTML الصفحة. انتقل كل مكوّن في Primer خلف علامة ميزة تبدّل بين الأنماط القديمة والجديدة، وأكّدت اختبارات الانحدار البصري تطابق اللقطات، ودار الطرح من الفريق إلى موظفي GitHub ثم إلى كل المستخدمين. بحلول ديسمبر 2024 اكتمل الانتقال: انخفض زمن العرض على الخادم بنسبة 55%، وزمن تهيئة المكوّنات في الصفحة بنسبة 25%.

التخلص من خاصية sx

كان الجزء الأصعب هو خاصية sx، الطريقة المعتادة لتخصيص مكوّنات Primer. قدّمت دعماً جيداً لـ TypeScript وقرباً من الشفرة، لكن كلفتها وقت التشغيل مرتفعة، وسيئ التوسع مع نمو عدد المكوّنات في الصفحة. بنت GitHub أولاً حزمة توافق باسم @primer/styled-react كي تستمر الشفرة القائمة في استيراد المكوّنات بينما تنتقل التطبيقات إلى @primer/react. بدأ العمل في أبريل 2025 وكان عدد خصائص sx المطلوب نقلها نحو 7760. نقل ثمانية مهندسين بالتناوب 6419 خاصية خلال ستة أشهر، وسُجّل تحسّن في زمن العرض على الخادم بين 1% و22% في بعض الصفحات. وعند استئناف العمل في أبريل 2026 أنهى مهندسان بمساعدة وكلاء Copilot للبرمجة الخصائص الـ895 المتبقية ووصلا إلى الصفر خلال ثلاثة أسابيع.

سبع سمات وتنظيف نهائي

تدعم GitHub سبع سمات، ولكل منها نسخة عالية التباين، وكانت جميعها تعمل عبر styled-components. كانت متغيرات السمات معرّفة أصلاً في CSS، لذا اقتصر العمل المتبقي على إزالة أدوات JavaScript. وبعد شهرين اختفت التبعيات. تعمل GitHub منذ يونيو 2026 على CSS Modules بنسبة 100%، وأُزيلت sx وstyled-components وstyled-system من التطبيق الرئيسي.