Katru reizi tik bieži, tehnoloģiju kaudzes lēmums, kas kādreiz jutās pareizi, sāk parādīt savas robežas, piemēram, saprotot, cik neefektīvs ir skrūvgrieziens pēc jaudas urbšanas.Styled ComponentsGadu gaitā tas mums labi kalpoja, piedāvājot apjomīgus stilus, dinamisku tematiku un pilnīgu kontroli mūsu React sastāvdaļās.Tailwind CSSPēkšņi kļuva skaidrs, ka achange was overdue.
Šis raksts ir mūsu pārejas no Styled Components uz Tailwind CSS, kāpēc mēs izdarījām pāreju, kā es tuvojos pārejai un kā process līdz šim izskatījās.
Kāpēc HackerNoon sākotnēji izmantoja stilizētas sastāvdaļas
Es nebiju daļa no komandas, kad Styled Components pirmo reizi tika izvēlēts, lai pārvaldītu mūsu CSS, bet tajā laikā,Tailwind CSS hadn’t even been released, un Styled Components padarīja daudz jēgas HackerNoon front-end arhitektūrai.
Tas ļāva izstrādātājiem rakstīt CSS tieši JavaScript, padarot komponentus pilnīgi pašpietiekami.encapsulated, reusable, and, at the time, thought to be easier to maintainDinamiskās stilēšanas iespējas, iebūvētais tēmas atbalsts un spēja nodot papildinājumus tieši stilos strādāja īpaši labi plašai lapu un izkārtojumu daudzveidībai, ko mēs veidojām.Styled Components served HackerNoon wellTātad
Kas lika mums apsvērt pāreju uz Tailwind?
Laika gaitā mūsu koda bāze pieauga, kā arī stilu pārvaldības sarežģītība.
Styled Components deva mums elastību, bet tas nāca ar izmaksām:larger bundle sizes,runtime performance hitsun acluttered component structureTas kļuva arvien grūtāk izsekot stilus vai atkārtoti tos efektīvi bez duplikācijas kodu.
Mēs arī pamanījām, ka daudzi no mūsu stiliem atkārtojas dažādās sastāvdaļās.Tailwind CSSUtility-first pieeja likās kā veids, kā racionalizēt visu - no izkārtojuma līdz atbildīgumam un pat tematizēšanai.
Būsim reāli: laismall dev team like HackerNoon’s, ideja par masveida koda bāzes pārveidošanuline by lineJoprojām mēs nevarējām ignorēt, cik plaši Tailwind tika pieņemts dev kopienā.
Kā es izveidoju pārslēgšanu
Visgrūtākais šajā maiņā?Setup.
Tailwind uzstādīšana bija vienkārša, bet, kad tas bija aktīvs, Tailwind globālie stili - pateicoties Preflight - sāka sadursmes ar mūsu esošajām sastāvdaļām.
Dzīvības glābējs šeit bija uzstādītspreflight: falseTajātailwind.config.jsFilma, kas pārvietojasdisabled most of Tailwind’s base resetsProtams, joprojām bija nelielas stila problēmas, kas jālabo, bet lietas izskatījās mazāk kā kara zona.
No turienes man vajadzējaestablish new conventions— kā mēs risinātu globālos stilus, atkārtoti izmantotu klases un izveidotu tematiski apzinātas sastāvdaļas ar Tailwind.
Un šeit ir daļa, ko es joprojām esmu pārsteigts:AI made this process actually enjoyable.
Refactoring tūkstošiem līniju kodu solo būtu bijis neprāts. bet es izmantoju ChatGPT, lai pārvērstu mūsu stilizētas sastāvdaļas Tailwind vienu reizi. par vienkāršām sastāvdaļām - izkārtojumi, starpsienas, struktūra - tas bija vējš.
Now, let me be honest:AI nesaņēma visu pareizi.Sarežģītākie, tematiskie komponenti joprojām ir nepieciešamimanual coding and plenty of hoursBet ar stabilu pamatu, no kura sākt, viss kļuva daudz vieglāk.Tailwind dokumentācija arī palīdzēja aizpildīt nepilnības, un, kad es pilnībā pieņēmuutility class mindsetLietas sāka klikšķināt.
Kā migrācija izskatās līdz šim
Es priecājos teiktTailwind is now live on HackerNoon!
No šī brīža, TheHackerNoon mājas lapa ir pilnībā pārveidotauz Tailwind CSS, ar Styled Components pilnībā noņemts. lielākā daļa citu lapu joprojām paļaujas uz Styled Components, un tie tiks pakāpeniski pārvērsti —one component, one page at a timeTātad
HackerNoon mājas lapa ir pilnībā pārveidota
Šī lēnāka pieeja faktiski ir bijusi svētība. katras sastāvdaļas pārveidošana man deva iespējurevisit and improvemūsu lapu dizainu un struktūru. Līdztekus Tailwind konversijai mēs ieviesāmmore modern UI, labāka izkārtojuma izmantošana, jaunas sastāvdaļas un patcustom-built theme pickerTas liek mūsu vecajai sistēmai kauns.
Pēc vairāk nekā 4 gadu darba HackerNoon, es jūtosreignitedTas ir tīrs, konsekvents un spēcīgs – un es esmu sajūsmā, ka turpināšu virzīt konversiju uz priekšu.styled-componentsNo mūsupackage.jsonPar labu 😉
Noslēguma pārdomas
Pāreja uz Tailwind CSS nebija tikai par stila bibliotēkas nomaiņu - tas bija par mūsu frontend darba plūsmas modernizēšanu, konsekvences pieņemšanu un izstrādes vienkāršošanu.flexibility, speed, and maintainabilityMums ir nepieciešams, lai mēs turpinātu skalot.
Tas joprojām ir darbs, kas notiek - mūsu lietojumprogrammā joprojām ir daudz Styled Components, bet redzot Tailwind tiešraidē mūsu mājas lapā un jaunizveidotajās sastāvdaļās, ir bijis neticami apmierinošs.
HackerNoon attīstās, un mūsu stili attīstās ar to.
