მეტი CSS, ნაკლები JavaScript: GitHub-მა სტილების სისტემა CSS Modules-ზე გადაიყვანა
GitHub-ის ინჟინრებმა ბლოგზე აღწერეს, როგორ ჩაანაცვლა კომპანიამ CSS-in-JS CSS Modules-ით. Primer-ის კომპონენტების მიგრაციამ სერვერზე რენდერის დრო 55%-ით, კომპონენტების ინიციალიზაცია კი 25%-ით შეამცირა.
GitHub-ის ინჟინრებმა ბლოგზე 2026 წლის 25 სექტემბერს აღწერეს, თუ როგორ ჩაანაცვლა კომპანიამ ინტერფეისის CSS-in-JS CSS Modules-ით. ჩანაწერის ავტორები Primer-ის დიზაინის სისტემის ინჟინრები Josh Black და Marie Lucca არიან.
რატომ გახდა სტილების სისტემა ბარიერი
პრობლემები 2023 წელს დაიწყო, როცა ზოგიერთ გვერდზე კომპონენტების რაოდენობა მკვეთრად გაიზარდა. გვერდის პირველი ჩატვირთვა შენელდა, ვინაიდან სტილები კლიენტის მხარეს ინიციალიზდებოდა; სერვერზე რენდერის სიჩქარეც დაეცა, სტილების განახლება კი რთულად სამართავი გახდა. Primer-ის გუნდს ისეთი გადაწყვეტა სჭირდებოდა, რომელიც კლიენტისა და სერვერის ხარჯს აიცილებდა, GitHub-ს კი არ შეაფერხებდა.
CSS Modules და ეტაპობრივი მიგრაცია
გუნდი CSS Modules-ზე შეჩერდა. ამ ფორმატში სტილები კომპონენტის JavaScript კოდის გვერდით, ცალკე CSS ფაილში იწერება, კლასების სახელები ლოკალურია და runtime არ საჭიროებს: სტილები ერთიან ფაილებად იყრება და გვერდის HTML-ის ნაწილად იგზავნება. კომპონენტები feature flag-ის მიღმა გადადიოდა, ვიზუალური რეგრესიის ტესტები კადრების იდენტურობას ადასტურებდა, გაშვება კი თანდათან ყველა მომხმარებელამდე მივიდა. მიგრაცია 2024 წლის დეკემბრისთვის დასრულდა: სერვერზე გვერდის რენდერს 55%-ით, კომპონენტების ინიციალიზაციას კი 25%-ით ნაკლები დრო სჭირდება.
sx პროპის ამოღება
უფრო რთული ნაწილი sx პროპი იყო, რომლითაც წლების განმავლობაში Primer-ის კომპონენტებს არგებდნენ. ის TypeScript-თან კარგად მუშაობდა, თუმცა runtime-ზე დიდ ხარჯს ქმნიდა, კომპონენტების ზრდასთან ერთად კი ცუდად მასშტაბირდებოდა. ჯერ შეიქმნა თავსებადობის პაკეტი @primer/styled-react, რომ ძველი კოდი კომპონენტების იმპორტს განაგრძობდა, სანამ დანერგვები @primer/react-ზე გადადიოდა. სამუშაო 2025 წლის აპრილში დაიწყო: გადასაყვანი იყო დაახლოებით 7760 sx პროპი. რვა ინჟინრის როტაციამ ექვს თვეში 6419 პროპი გადაიტანა, ზოგიერთ გვერდზე კი სერვერზე რენდერის დრო 1%-დან 22%-მდე გაუმჯობესდა. სამუშაო 2026 წლის აპრილში განახლდა: ორმა ინჟინერმა Copilot-ის აგენტებთან ერთად დარჩენილი 895 პროპი სამ კვირაში ნულამდე დაიყვანა.
შვიდი თემა და საბოლოო გაწმენდა
GitHub შვიდ თემას მხარს უჭერს და თითოეულს მაღალი კონტრასტის ვარიანტიც აქვს; ყველა მათგანი styled-components-ზე მუშაობდა. თემის ცვლადები CSS-ში უკვე განსაზღვრული იყო, დარჩა მხოლოდ JavaScript-ის უტილიტების მოცილება. ორ თვეში დამოკიდებულებები გაქრა. GitHub 2026 წლის ივნისიდან 100% CSS Modules-ზე მუშაობს და ძირითადი აპლიკაციიდან sx, styled-components და styled-system ამოიღო.
SiTech — AI-გაძლიერებული ვებ დეველოპმენტი
ვქმნით სწრაფ, თანამედროვე ვებსაიტებს და AI-ს ვაერთიანებთ ქართული ბიზნესებისთვის. გაქვთ პროექტი ან კითხვა? სიამოვნებით დაგეხმარებით.