أكملت GitHub في يونيو 2026 تشغيل موقعها بالكامل باستخدام CSS Modules، منهية اعتمادها على CSS-in-JS، بما في ذلك styled-components وstyled-system وخصائص sx. وتقول الشركة إن هذا التحول خفّض زمن العرض من جهة الخادم بنسبة 55%، كما قلل الوقت اللازم لتهيئة المكونات في الصفحة بنسبة 25%.
جاءت الخطوة استجابة لتضخم عدد المكونات في بعض صفحات GitHub منذ عام 2023. فقد كان الحل السابق يتطلب تهيئة الأنماط على العميل، ويزيد كلفة جمع الأنماط أثناء العرض من جهة الخادم، كما يجعل تحديثات التنسيق أكثر صعوبة كلما ارتفع عدد المكونات في الصفحة.
لماذا اختارت GitHub CSS Modules؟
تسمح CSS Modules بكتابة التنسيقات في ملفات CSS ملاصقة لمصدر المكون، مع جعل أسماء الأصناف محلية افتراضياً لتقليل التصادمات. والأهم في هذه الحالة أنها تلغي الحاجة إلى سلوك وقت تشغيل على العميل أو الخادم؛ إذ تُجمع التنسيقات في ملفات CSS تُرسل مع HTML الصفحة.
بدأت عملية النقل من نظام التصميم Primer. أضاف الفريق ملفات CSS Modules لكل مكون، وربط المكونات بأعلام ميزات تتيح التبديل بين الأسلوبين القديم والجديد، ثم استخدم اختبارات الانحدار البصري للتحقق من تطابق النتائج. بعد ذلك جرى التوسع تدريجياً من فريق Primer إلى موظفي GitHub ثم إلى جميع المستخدمين.
بحلول ديسمبر 2024، كانت جميع مكونات Primer قد انتقلت إلى CSS Modules. لكن ذلك لم يكن كافياً، لأن أجزاء كبيرة من قاعدة شيفرة GitHub كانت لا تزال تستخدم خاصية sx لتخصيص المكونات عبر كائنات مضمّنة. ورغم أن هذه الطريقة وفرت تكاملاً جيداً مع TypeScript ورموز التصميم، فإن طبيعتها الديناميكية رفعت كلفة التشغيل وجعلت التوسع أصعب مع زيادة عدد المكونات.
إدارة الانتقال على نطاق واسع
لتجنب كسر الاستخدامات القائمة، أنشأت GitHub مكتبة وسيطة باسم @primer/styled-react. سمحت هذه المكتبة باستمرار استخدام sx مع المكونات التي نُقلت إلى CSS Modules، في حين أمكن للمسارات التي لا تحتاج إلى sx الاستيراد مباشرة من @primer/react.
بدأت عملية إزالة sx في أبريل 2025، عندما كان هناك نحو 7,760 استخداماً لهذه الخاصية. وبمساعدة إضافة داخلية لـVS Code وأداة codemod، نقلت مجموعة من ثمانية مهندسين 6,419 استخداماً خلال ستة أشهر، مع مكاسب في زمن العرض من جهة الخادم تراوحت بين 1% و22% في بعض الصفحات. وفي أبريل 2026، انخفض العدد من 895 إلى صفر خلال ثلاثة أسابيع، بمشاركة مهندسين اثنين وباستخدام وكلاء البرمجة في GitHub Copilot.
ظلّت السمات البصرية تحدياً إضافياً، إذ تدعم GitHub سبع سمات، لكل منها وضع تباين عالٍ، وكانت أجزاء من هذا النظام مرتبطة بـstyled-components. لذلك نقل الفريق أيضاً استخدامات JavaScript وأدوات السمات، مع إبقاء متغيرات الألوان معرفة في CSS.
ما الذي تعنيه التجربة للمطورين؟
تُظهر أرقام GitHub أن التخلص من منطق التنسيق وقت التشغيل يمكن أن يحقق مكاسب ملموسة عندما تتضخم واجهات المستخدم. لكن القيمة الأهم في التجربة ليست اختيار CSS Modules بحد ذاته، بل طريقة التنفيذ: توافق مرحلي، أعلام ميزات، اختبارات بصرية، نشر تدريجي، وأتمتة قابلة للمراجعة.
في المقابل، تكشف العملية أن الانتقال من CSS-in-JS لا يقتصر على استبدال صيغة كتابة التنسيقات. فقد تطلب إزالة خصائص sx، وفك الارتباط بين السمات وstyled-components، والحفاظ على توافق المكونات طوال فترة طويلة. لذلك لا تثبت النتائج أن كل مشروع سيحصل على المكاسب نفسها؛ فهي مرتبطة بحجم GitHub وبنية مكوناته وطريقة استخدامه للتنسيق الديناميكي.
كيف أعددنا هذا الخبر؟
اعتمد الخبر على المصدر الأصلي الموضح أعلاه. قد نستخدم أدوات آلية للمساعدة في الاستخراج والتصنيف والصياغة،
لكن النشر يخضع لقواعد تمنع المحتوى المكرر والقصير أو الروتيني منخفض القيمة.
اقرأ سياستنا التحريرية.