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. Gadu gaitā tas mums labi kalpoja, piedāvājot apjomīgus stilus, dinamisku tematiku un pilnīgu kontroli mūsu React sastāvdaļās. Pēkšņi kļuva skaidrs, ka a Styled Components Tailwind CSS change 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ā, , un Styled Components padarīja daudz jēgas HackerNoon front-end arhitektūrai. Tailwind CSS hadn’t even been released Tas ļāva izstrādātājiem rakstīt CSS tieši JavaScript, padarot komponentus pilnīgi pašpietiekami. Dinamiskā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. Tātad encapsulated, reusable, and, at the time, thought to be easier to maintain Styled Components served HackerNoon well 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: , un a Tas kļuva arvien grūtāk izsekot stilus vai atkārtoti tos efektīvi bez duplikācijas kodu. larger bundle sizes runtime performance hits cluttered component structure Mēs arī pamanījām, ka daudzi no mūsu stiliem atkārtojas dažādās sastāvdaļās. Utility-first pieeja likās kā veids, kā racionalizēt visu - no izkārtojuma līdz atbildīgumam un pat tematizēšanai. Tailwind CSS Būsim reāli: lai , ideja par masveida koda bāzes pārveidošanu Joprojām mēs nevarējām ignorēt, cik plaši Tailwind tika pieņemts dev kopienā. small dev team like HackerNoon’s line by line 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īts Tajā Filma, kas pārvietojas Protams, joprojām bija nelielas stila problēmas, kas jālabo, bet lietas izskatījās mazāk kā kara zona. preflight: false tailwind.config.js disabled most of Tailwind’s base resets No turienes man vajadzēja — kā mēs risinātu globālos stilus, atkārtoti izmantotu klases un izveidotu tematiski apzinātas sastāvdaļas ar Tailwind. establish new conventions 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š. AI nesaņēma visu pareizi.Sarežģītākie, tematiskie komponenti joprojām ir nepieciešami Bet 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ņēmu Lietas sāka klikšķināt. Now, let me be honest: manual coding and plenty of hours utility class mindset Kā migrācija izskatās līdz šim Es priecājos teikt Tailwind is now live on HackerNoon! No šī brīža, The uz 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 — Tātad HackerNoon mājas lapa ir pilnībā pārveidota one component, one page at a time 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ēju mūsu lapu dizainu un struktūru. Līdztekus Tailwind konversijai mēs ieviesām , labāka izkārtojuma izmantošana, jaunas sastāvdaļas un pat Tas liek mūsu vecajai sistēmai kauns. revisit and improve more modern UI custom-built theme picker Pēc vairāk nekā 4 gadu darba HackerNoon, es jūtos Tas ir tīrs, konsekvents un spēcīgs – un es esmu sajūsmā, ka turpināšu virzīt konversiju uz priekšu. No mūsu Par labu 😉 reignited styled-components package.json 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. Mums ir nepieciešams, lai mēs turpinātu skalot. flexibility, speed, and maintainability 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.

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Check out my projects

Šis audio ir izveidots stāsta oriģinālvalodā!

No stilīgām sastāvdaļām līdz Tailwind CSS: HackerNoon migrācijas stāsts

About Author

KOMENTĀRI

PAKARINĀT TAGUS

ŠIS RAKSTS TIKS PĀRSTRĀDĀTS

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps