Всеки път решението за технологичен стак, което някога се е чувствало правилно, започва да показва своите граници - като осъзнаването колко неефективен е отвертката след използването на електрическа тренировка.Styled ComponentsВ продължение на години тя ни служи добре – предлагайки обхванати стилове, динамично тематично проектиране и пълен контрол в рамките на нашите компоненти на React.Tailwind CSSПо-късно стана ясно, че аchange was overdue.
Този пост е прекъсване на нашия преход от Styled Components към Tailwind CSS, защо направихме този ход, как подходих към прехода и какъв е процесът досега.
Защо HackerNoon първоначално използва стилизирани компоненти
Не бях част от екипа, когато Styled Components беше избран за първи път, за да се справя с нашия CSS, но по онова време,Tailwind CSS hadn’t even been released, и Styled Components направиха много смисъл за архитектурата на предния край на HackerNoon.
Той позволи на разработчиците да пишат CSS директно в JavaScript, което прави компонентите напълно самостоятелни.encapsulated, reusable, and, at the time, thought to be easier to maintainДинамичните възможности за стилизиране, вградената поддръжка на теми и способността да се прехвърлят кодове директно в стилове работят особено добре за голямото разнообразие от страници и оформления, които изграждаме.Styled Components served HackerNoon well. от
Какво ни накара да помислим за преминаване към Tailwind?
С течение на времето нашата база от кодове се разраства – както и сложността на стиловете за управление.
Стилизираните компоненти ни дадоха гъвкавост, но това дойде с цена:larger bundle sizes,runtime performance hitsи аcluttered component structureСтаваше все по-трудно да се проследяват стиловете или да се използват ефективно, без да се дублира код.
Също така забелязахме, че много от нашите стилове се повтарят в различни компоненти.Tailwind CSSПодходът на utility-first се чувстваше като начин да се рационализира всичко – от оформлението до отзивчивостта и дори тематиката.
Но нека бъдем реални: заsmall dev team like HackerNoon’s, идеята за пресъздаване на масивна кодова базаline by lineЧувствах се като огромно начинание.Въпреки това, не можехме да пренебрегнем колко широко Tailwind се приема в общността на разработчиците.
Как да направим Switch
Най-трудната част от тази смяна?Setup.
Инсталирането на Tailwind беше просто, но след като беше активно, глобалните стилове на Tailwind – благодарение на Preflight – започнаха да се сблъскват с нашите съществуващи компоненти.
Животът тук беше поставенpreflight: falseВ наtailwind.config.jsФилмът се движиdisabled most of Tailwind’s base resetsРазбира се, все още имаше малки проблеми със стила, но нещата изглеждаха по-малко като военна зона.
Оттам нататък трябваше даestablish new conventions— как ще се справим с глобалните стилове, ще използваме класове и ще изграждаме съзнателни компоненти с Tailwind.
И ето частта, която все още ме учудва:AI made this process actually enjoyable.
Рефакторизирането на хиляди линии соло код би било лудост. Но използвах ChatGPT, за да конвертирам нашите стилизирани компоненти в Tailwind един по един. За прости компоненти – оформления, разстояния, структура – това беше вятър.
Now, let me be honest:AI не получи всичко правилно.По-сложни, тематични компоненти все още са необходимиmanual coding and plenty of hoursНо да имаш солидна основа, за да започнеш, направи нещата много по-лесни.Документацията на Tailwind също помогна да се запълнят празнините и веднъж напълно прегърнахutility class mindsetНещата започнаха да кликват.
Как изглежда миграцията досега
Щастлив съм да кажаTailwind is now live on HackerNoon!
Отсега нататък, наHackerNoon Homepage is fully converted to Tailwind CSS, with Styled Components completely removed. Most of the other pages still rely on Styled Components, and they’ll be converted gradually—one component, one page at a time. от
Страницата на HackerNoon е напълно конвертирана
Този по-бавен подход всъщност е благословение.Рефакторизирането на всеки компонент ми даде възможност даrevisit and improveдизайнът и структурата на нашите страници. В допълнение към конвертирането на Tailwind, въведохмеmore modern UI, по-добро използване на оформлението, нови компоненти и дориcustom-built theme pickerТова ни кара да се срамуваме от старата система.
След повече от 4 години работа в HackerNoon, чувствам, чеreignitedTailwind направи изграждането забавно отново.Това е чисто, последователно и мощно – и аз съм развълнуван да продължа да тласкам конверсията напред.Кой знае?Може би скоро ще изтриемstyled-componentsОт нашияpackage.jsonЗа доброто 😉
Заключителни мисли
Преминаването към Tailwind CSS не беше само за замяна на библиотека за стилизиране – това беше за модернизиране на нашия работен поток на фронта, приемане на последователност и опростяване на разработването.flexibility, speed, and maintainabilityТрябва да продължим да се разширяваме.
Това все още е работа в ход - нашето приложение все още има много Styled Components - но виждането на Tailwind на живо на нашата начална страница и в ново преработени компоненти е невероятно възнаграждаващо.
HackerNoon се развива и нашите стилове се развиват с него.
