Svaki put tako često, tehnološka odluka koja se jednom osjećala ispravnom počinje pokazivati svoje granice - kao što je shvaćanje koliko je neučinkovit vijač nakon korištenja strujnog bušilice. Godinama nam je dobro služio – nudeći obuhvaćene stilove, dinamično tematiziranje i punu kontrolu unutar naših React komponenti. Odrasla, postalo je jasno da je a Styled Components Tailwind CSS change was overdue. Ovaj post je sastavni dio našeg pomaka od Styled Components na Tailwind CSS, zašto smo napravili pomak, kako sam pristupio prijelazu i kakav je proces do sada izgledao. Zašto je HackerNoon izvorno koristio stilizirane komponente Nisam bio dio tima kada je Styled Components prvi put izabran za rukovanje našim CSS-om, ali u to vrijeme, , i Styled Components učinili su puno smisla za HackerNoonovu front-end arhitekturu. Tailwind CSS hadn’t even been released To je omogućilo programerima da napišu CSS izravno unutar JavaScript-a, čineći komponente potpuno samostalno. Dinamičke stilske mogućnosti, ugrađena potpora tematizaciji i sposobnost prelaska propisa izravno u stilove posebno su dobro funkcionirali za široku raznolikost stranica i rasporeda koje smo izgradili. . u encapsulated, reusable, and, at the time, thought to be easier to maintain Styled Components served HackerNoon well Što nas je navelo da razmotrimo prijelaz na Tailwind? Tijekom vremena naša je baza kodova rasla, a tako je i složenost stilova upravljanja. Styled Components nam je dao fleksibilnost, ali to je došlo po cijenu: , i a Sve je teže pratiti stilove ili ih učinkovito ponovno upotrijebiti bez dupliranja koda. larger bundle sizes runtime performance hits cluttered component structure Također smo primijetili da se mnogi od naših stilova ponavljaju preko komponenti. Pristup utility-first osjećao se kao način da se sve racionalizira - od rasporeda do odgovornosti i čak tematizacije. Tailwind CSS Ali budimo realni: za , ideja o refaktoriranju masivne kodne baze Ipak, nismo mogli zanemariti koliko je Tailwind široko prihvaćen u dev zajednici. small dev team like HackerNoon’s line by line Kako sam napravio switch Najteži dio ove promjene? Setup. Instaliranje Tailwind-a bilo je jednostavno, ali kada je aktivno, globalni stilovi Tailwind-a - zahvaljujući Preflight-u - počeli su se sudarati s našim postojećim komponentama. Spasitelj ovdje je bio postavljen U na Sljedeći članakOvo se kreće Naravno, još uvijek je bilo manjih problema sa stiliziranjem koje treba riješiti, ali stvari su izgledale manje kao ratna zona. preflight: false tailwind.config.js disabled most of Tailwind’s base resets Odatle sam morao -kako bismo se nosili s globalnim stilovima, ponovili tečajeve i izgradili tematske komponente s Tailwindom. establish new conventions A evo i onog što me još uvijek iznenađuje: AI made this process actually enjoyable. Refactoring tisuće redaka koda solo bilo bi ludilo. ali ja sam koristio ChatGPT kako bi pretvorio naše stilirane komponente u Tailwind jedan po jedan. Za jednostavne komponente - rasporedi, raspodjela, struktura - to je bio vjetar. Samo prilepite, prilagodite i idite. AI nije dobio sve u redu.Složenije, tematske komponente još uvijek potrebne No, imati čvrstu osnovu za početak učinilo je stvari mnogo lakšim. Tailwindova dokumentacija također je pomogla popuniti praznine, a jednom sam u potpunosti prihvatio Stvari su počele kliknuti. Now, let me be honest: manual coding and plenty of hours utility class mindset Kako je do sada izgledala migracija Drago mi je reći Tailwind is now live on HackerNoon! Od sada, na na Tailwind CSS, sa Styled Components potpuno uklonjen. Većina ostalih stranica još uvijek se oslanja na Styled Components, a oni će se postupno pretvoriti— . u HackerNoon stranica je u potpunosti pretvorena one component, one page at a time HackerNoon stranica je u potpunosti pretvorena Ovaj sporiji pristup zapravo je bio blagoslov. dizajn i strukturu naših stranica. Uz Tailwind konverziju, uveli smo , bolje korištenje rasporeda, nove komponente, pa čak i To čini naš stari tematski sustav sramotnim. revisit and improve more modern UI custom-built theme picker Nakon više od 4 godine rada na HackerNoon-u, osjećam Tailwind je ponovno napravio gradnju zabavnom. Čista je, dosljedna i moćna – i uzbuđen sam što ću nastaviti gurati konverziju naprijed. Od naših Za dobro. 😉 reignited styled-components package.json Završne zamisli Premještanje na Tailwind CSS nije bilo samo o zamjeni stilske knjižnice – bilo je o modernizaciji našeg frontend toka rada, prihvaćanju dosljednosti i pojednostavnjenju razvoja. Potrebno nam je da nastavimo širenje. flexibility, speed, and maintainability To je još uvijek posao u tijeku – naša aplikacija još uvijek ima puno Styled Components – ali gledanje Tailwinda uživo na našoj početnoj stranici i u novonastalim komponentama bilo je nevjerojatno nagrađujuće. HackerNoon se razvija, a naši stilovi se razvijaju s njom.

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

Ovaj zvuk je proizveden na izvornom jeziku priče!

Od stilskih komponenti do Tailwind CSS: A HackerNoon Migration Story

About Author

KOMENTARI

VIJESI OZNAKE

OVAJ ČLANAK JE PREDSTAVLJEN U

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps