So oft beginnt eine Tech-Stack-Entscheidung, die sich einmal als richtig gefühlt hat, ihre Grenzen zu zeigen - wie das Erkennen, wie ineffizient ein Schraubendreher ist, nachdem er ein Power-Bohrgerät benutzt hat. Jahrelang hat es uns gut gedient – es bietet umfangreiche Stile, dynamische Themen und volle Kontrolle innerhalb unserer React-Komponenten. Erwachsen wurde, wurde klar, dass a Styled Components Tailwind CSS change was overdue. Dieser Beitrag ist ein Abbruch unseres Wechseln von Styled Components zu Tailwind CSS, warum wir den Wechsel gemacht haben, wie ich den Wechsel näherte und wie der Prozess bisher aussah. Warum HackerNoon ursprünglich gestylte Komponenten verwendete Ich war nicht Teil des Teams, als Styled Components zuerst ausgewählt wurde, um mit unserem CSS umzugehen, aber zu der Zeit, , und Styled Components machten viel Sinn für die Front-End-Architektur von HackerNoon. Tailwind CSS hadn’t even been released Es ermöglichte es den Entwicklern, CSS direkt innerhalb von JavaScript zu schreiben, so dass Komponenten vollständig selbstständig sind. Die dynamischen Styling-Fähigkeiten, die integrierte Themengestaltung und die Fähigkeit, Props direkt in Stile zu übertragen, funktionierten besonders gut für die breite Palette von Seiten und Layouts, die wir bauten. ... . encapsulated, reusable, and, at the time, thought to be easier to maintain Styled Components served HackerNoon well Was hat uns dazu gebracht, über den Wechsel zum Tailwind nachzudenken? Im Laufe der Zeit wuchs unsere Code-Basis – und so auch die Komplexität von Management-Styles. Styled Components gaben uns Flexibilität, aber das kostete: , der und a Es wurde immer schwieriger, Stile zu verfolgen oder sie effektiv wiederzuverwenden, ohne Code zu duplizieren. larger bundle sizes runtime performance hits cluttered component structure Wir haben auch bemerkt, dass sich viele unserer Stile über Komponenten hinweg wiederholten. Der utility-first-Ansatz fühlte sich wie eine Möglichkeit, alles zu rationalisieren - von der Layout bis zur Reaktionsfähigkeit und sogar zum Thema. Tailwind CSS Aber lasst uns real sein: für eine , die Idee, eine massive Codebase neu zu gestalten Es fühlte sich wie ein riesiges Unternehmen an. Dennoch konnten wir nicht ignorieren, wie weit Tailwind in der Dev-Community angenommen wurde. small dev team like HackerNoon’s line by line Wie ich den Switch gemacht habe Der schwierigste Teil dieses Wechsels? Setup. Die Installation von Tailwind war einfach, aber sobald es aktiv war, begannen die globalen Stile von Tailwind – dank Preflight – mit unseren bestehenden Komponenten zu kollidieren. Ein Lebensretter hier setzte sich In der Datei, die sich bewegt Natürlich gab es noch kleinere Stylingprobleme zu beheben, aber die Dinge sahen weniger aus wie eine Kriegszone. preflight: false tailwind.config.js disabled most of Tailwind’s base resets Von dort aus musste ich Wie wir mit globalen Stilen umgehen, Klassen wiederverwenden und themenbewusste Komponenten mit Tailwind bauen würden. establish new conventions Und hier ist der Teil, den ich immer noch überrascht bin: AI made this process actually enjoyable. Tausende von Zeilen von Code-Solo neu zu gestalten, wäre Wahnsinn gewesen. Aber ich nutzte ChatGPT, um unsere gestylten Komponenten zu einem Mal in Tailwind umzuwandeln. Für einfache Komponenten - Layouts, Spaziergänge, Struktur - war es ein Wind. AI hat nicht alles richtig gemacht.Komplexe, thematische Komponenten sind immer noch erforderlich Aber eine solide Basis zu haben, um von Anfang an zu beginnen, machte die Dinge so viel einfacher. Tailwinds Dokumentation half auch, die Lücken zu füllen, und sobald ich das vollständig umarmte Die Dinge fingen an zu klicken. Now, let me be honest: manual coding and plenty of hours utility class mindset Wie die Migration bisher aussah Ich bin froh zu sagen Tailwind is now live on HackerNoon! Ab sofort, die Tailwind CSS, mit Styled Components vollständig entfernt. Die meisten anderen Seiten verlassen sich immer noch auf Styled Components, und sie werden allmählich konvertiert — ... . HackerNoon Homepage vollständig umgewandelt one component, one page at a time HackerNoon Homepage vollständig umgewandelt Dieser langsame Ansatz war in der Tat ein Segen. Die Neufaktorisierung jeder Komponente gab mir die Möglichkeit, das Design und die Struktur unserer Seiten. Neben der Tailwind-Konvertierung haben wir eine bessere Layoutverwendung, neue Komponenten und sogar eine Das bringt unser altes Themensystem zur Schande. revisit and improve more modern UI custom-built theme picker Nach mehr als vier Jahren bei HackerNoon habe ich das Gefühl, Tailwind hat das Bauen wieder Spaß gemacht. Es ist sauber, konsistent und leistungsstark – und ich bin begeistert, die Konvertierung weiter voranzutreiben. Von unserer Zum Guten 😉 reignited styled-components package.json Final Tailwinding Gedanken Der Übergang zu Tailwind CSS ging nicht nur darum, eine Styling-Bibliothek auszutauschen – es ging darum, unseren Frontend-Workflow zu modernisieren, Konsistenz zu akzeptieren und die Entwicklung zu vereinfachen. Wir brauchen es, wenn wir weiter schieben. flexibility, speed, and maintainability Es ist immer noch eine Arbeit im Gange – unsere App hat immer noch viele Styled Components – aber Tailwind live auf unserer Homepage und in neu umgestalteten Komponenten zu sehen, war unglaublich lohnend. HackerNoon entwickelt sich, und unsere Stile entwickeln sich mit ihm.

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

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Von Styled Components zu Tailwind CSS: A HackerNoon Migration Story

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded 2024: Wir feiern unsere Remote-Work-Community!

HackerNoon Decoded 2024: Celebrating Our Cybersecurity Community!

HackerNoon's DeFi Writing Contest with SORA Network: XSTUSD Use Cases

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded 2024: Wir feiern unsere Remote-Work-Community!

HackerNoon Decoded 2024: Celebrating Our Cybersecurity Community!

HackerNoon's DeFi Writing Contest with SORA Network: XSTUSD Use Cases

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps