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

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

Това аудио е създадено на оригиналния език на историята!

От стилни компоненти до Tailwind CSS: A HackerNoon миграционна история

About Author

КОМЕНТАРИ

ЗАКАЧВАЙТЕ ЕТИКЕТИ

ТАЗИ СТАТИЯ Е ПРЕДСТАВЕНА В

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps