Immer so oft beginnt eine Technologie-Stack-Entscheidung, die sich einmal als richtig gefühlt hat, ihre Grenzen zu zeigen – wie das Erkennen, wie ineffizient ein Schraubendreher nach der Verwendung eines Power-Bohrgeräts ist. Das ist bei HackerNoon mit der Verwendung von Styled Components der Fall.Jahrelang hat es uns gut gedient – umfangreiche Stile, dynamische Themen und volle Kontrolle in unseren React-Komponenten zu bieten.Styled KomponentenTailwind CSS Änderung war überfällig. 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. Ich war nicht Teil des Teams, als Styled Components zum ersten Mal für unsere CSS gewählt wurde, aber zu der Zeit war Tailwind CSS noch nicht einmal veröffentlicht worden, und Styled Components machte viel Sinn für HackerNoon Front-End-Architektur. Es ermöglichte es den Entwicklern, CSS direkt innerhalb von JavaScript zu schreiben und Komponenten vollständig selbstständig zu machen. Dieser Ansatz fühlte sich von Natur aus sehr "React-nativ" an -encapsulated, wiederverwendbar und zu der Zeit dachte man, dass es einfacher wäre, über eine wachsende Codebase und Team zu pflegen.Die dynamischen Styling-Fähigkeiten, die eingebaute Theme-Unterstützung 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. eingekapselt, wiederverwendbar und zu der Zeit als einfacher zu pflegen gedachtStyled Components diente HackerNoon gut Im Laufe der Zeit wuchs unsere Codebasis – und so auch die Komplexität der Verwaltungsstile. Styled Components gaben uns Flexibilität, aber das kam zu einem Preis: größere Bündelgrößen, runtime-Performance-Hits und eine klutterte Komponentenstruktur gefüllt mit zunehmend langen gestylten Blöcken.größere BündelgrößenLaufzeit Performance HitsKlusterte Komponentenstruktur Wir haben auch bemerkt, dass sich viele unserer Stile über Komponenten hinweg wiederholen. Das ist, wenn Tailwind CSS begann, viel Sinn zu machen.Tailwind CSS Aber lasst uns real sein: Für ein kleines Dev-Team wie HackerNoon's fühlte sich die Idee, eine massive Codebasis -Linie nach Linie neu zu gestalten, wie ein riesiges Unterfangen.kleines Dev-Team wie HackerNoon'sLinie nach Linie Der schwierigste Teil dieses Switches? 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 Lifesaver hier setzte Von dort aus musste ich neue Konventionen etablieren - wie wir globale Stile handhaben, Klassen wiederverwenden und themenbewusste Komponenten mit Tailwind bauen. neue Konventionen einrichten Und hier ist der Teil, von dem ich immer noch erstaunt bin: KI machte diesen Prozess tatsächlich angenehm. Tausende von Zeilen von Code-Solo zu reflektieren, 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. Lassen Sie mich jetzt ehrlich sein: KI hat nicht alles richtig bekommen.Komplexe, thematische Komponenten benötigten immer noch manuelle Codierung und viele Stunden.Aber eine solide Grundlage, um von hier aus zu beginnen, machte es so viel einfacher.Nun, lass mich ehrlich sein: manuelle Codierung und viele StundenNützlichkeitsklasse Mindset Ich freue mich zu sagen Tailwind ist jetzt live auf HackerNoon! 🎉 As of now, the 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. Dieser langsamere Ansatz war tatsächlich ein Segen.Die Refactoring jeder Komponente gab mir die Möglichkeit, zu überprüfen und das Design und die Struktur unserer Seiten zu verbessern Neben der Tailwind-Konvertierung haben wir eine modernere Benutzeroberfläche eingeführt, eine bessere Layout-Nutzung, neue Komponenten und sogar einen benutzerdefinierten Theme-Picker eingeführt, der unser altes Themensystem beschämt. Nachdem ich über 4 Jahre bei HackerNoon gearbeitet habe, fühle ich mich reignited wieder in unsere Codebase eintauchen. Tailwind hat den Aufbau wieder Spaß gemacht. Es ist sauber, konsistent und leistungsstark – und ich bin begeistert, die Konvertierung weiter voranzubringen. Wer weiß? Vielleicht werden wir bald 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.Während Styled Components bei der Gestaltung der HackerNoon-Schnittstelle während einer kritischen Wachstumsphase geholfen hat, gibt Tailwind uns die Flexibilität, Geschwindigkeit und Wartungsfähigkeit, die wir benötigen, während wir weiter wachsen. 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 überarbeiteten Komponenten zu sehen, war unglaublich lohnend. HackerNoon entwickelt sich, und unsere Stile entwickeln sich damit.
Warum HackerNoon ursprünglich Styled Components verwendet hat
Was hat uns dazu gebracht, die Umstellung auf Tailwind in Betracht zu ziehen?
Wie ich den Switch gemacht habe
preflight: false in der tailwind.config.js Datei. Diese Bewegung deaktivierte die meisten Basis-Resets von Tailwind, was wieder einige Ordnung brachte.preflight: falsetailwind.config.jsdeaktiviert die meisten Basiseinstellungen von Tailwind
Wie die Migration so weit aussieht
styled-components aus unserem package.json für immer löschen. 😉styled-componentspackage.json
Finale Tailwinding Gedanken
