たまに、かつて正しいと感じたテクノロジースタックの決定は限界を示し始めます - 電源ドリルを使用した後、スライドライバーがどれほど非効率であるかを認識するように。Styled Components何年もの間、それは広範囲にわたるスタイル、ダイナミックなテーマ設定、そしてReactコンポーネント内の完全な制御を提供して、私たちのコードベースが進化し、そのようなツールを提供しました。Tailwind CSS成熟して、Aが明らかになった。change was overdue.
This post is a breakdown of our shift from Styled Components to Tailwind CSS, why we made the move, how I approached the transition, and what the process has looked like so far. If you are working with legacy styles or considering Tailwind for your own projects, hopefully this gives you something useful (or at least relatable) to walk away with. この投稿は、スタイリッシュなコンポーネントから Tailwind CSSに移行することにより、なぜ私たちはこの動きを作ったのか、私が移行にどのようにアプローチしたのか、そしてこれまでのプロセスがどうだったのかを解説しています。
なぜHackerNoonは元々スタイリッシュなコンポーネントを使用したのか
スタイリングコンポーネントが当初CSSを扱うために選ばれた時、私はチームの一員ではなかったが、当時、Tailwind CSS hadn’t even been released, and Styled Components made a lot of sense for HackerNoon's front-end architecture. HackerNoonのフロントエンドアーキテクチャに多くの意味を与えました。
これは、開発者がJavaScript内で直接CSSを書くことを可能にし、コンポーネントを完全に自己コンテンツにします。encapsulated, reusable, and, at the time, thought to be easier to maintain成長するコードベースとチームで、ダイナミックなスタイリング機能、組み込まれたテーマサポート、スタイルに直接プロプスを転送する能力は、私たちが構築していた幅広いページやレイアウトのために特によく機能しました。Styled Components served HackerNoon wellで。
Tailwindへの切り替えを考えた理由は何ですか?
時間の経過とともに、私たちのコードベースは成長し、管理スタイルの複雑さもそうでした。
スタイリッシュなコンポーネントは私たちに柔軟性を提供しましたが、これはコストがかかりました:larger bundle sizesで、runtime performance hitsそして、Acluttered component structureますます長いスタイリングブロックで満たされ、コードを複製することなく、スタイルを追跡したり、効果的に再利用したりすることが難しくなりました。
私たちはまた、私たちのスタイルの多くがコンポーネントを越えて繰り返していることに気づきました。Tailwind CSSユーティリティファーストアプローチは、レイアウトから反応性やテーマ化まで、すべてを簡素化する方法のように感じました。
しかし、現実になろう:Asmall dev team like HackerNoon’s, the idea of refactoring a massive codebase. 大規模なコードベースの再構築line by lineそれでも、Teilwindがデビューコミュニティでどれほど広く採用されているかを無視することはできませんでした。
How I Made the Switch より
この変更の最も難しい部分は?Setup.
Tailwind のインストールはシンプルでしたが、アクティブになったら、Tailwind のグローバルなスタイルは Preflight のおかげで、既存のコンポーネントと衝突し始めました。
A lifesaver here was settingpreflight: falseIN THEtailwind.config.jsファイル: 動くdisabled most of Tailwind’s base resets確かに、まだ小さなスタイリングの問題が修正されていたが、物事は戦争地帯のようではなかった。
そこから、わたしはestablish new conventionsグローバルなスタイルをどのように処理し、クラスを再利用し、Tailwindでテーマを意識するコンポーネントを構築するか。
そして、ここは私がまだ驚いている部分です:AI made this process actually enjoyable.
何千行ものコードソロを再現することは狂気だっただろうが、私はチャットGPTを使用して、スタイリングされたコンポーネントをタイムウィンドに1つずつ変換しました。
Now, let me be honest:AIはすべてを正しく行いませんでした。より複雑でテーマ化されたコンポーネントはまだ必要です。manual coding and plenty of hoursしかし、スタートするための堅固な基盤を持つことは、物事をより容易にしました。Tailwindのドキュメンタリーはまた、空白を埋めるのに役立ちました。utility class mindset物事がクリックし始めた。
移住が今までどう見えたか
I am happy to sayTailwind is now live on HackerNoon!↓↓
現在のところ、TheHackerNoonのホームページが完全に変換されました。Tailwind CSS に、スタイリングコンポーネントが完全に削除されました. 他のほとんどのページはまだスタイリングコンポーネントに依存し、徐々に変換されます。one component, one page at a timeで。
HackerNoonのホームページが完全に変換されました。
このゆっくりとしたアプローチは、実際には祝福でした. 各コンポーネントの再構成は、私に機会を与えました。revisit and improve私たちのページのデザインと構造. Tailwindの変換に加えて、私たちはmore modern UI, better layout usage, new components, and even acustom-built theme picker古いシステムを恥ずかしがる。
ハッカーノーンで4年以上働いた後、私はreignited再びコードベースに潜入しました。Tailwindは再びビルディングを楽しくしました。それはクリーンで、一貫性があり、強力です―そして私はコンバージョンを前進させ続けることに興奮しています。styled-componentsfrom わたしたちpackage.jsonいいね 😉
Final Tailwinding Thoughts シングル
Tailwind CSSへの移行は、スタイリングライブラリを交換することだけではなく、フロントエンドのワークフローを近代化し、一貫性を採用し、開発を簡素化することでした。flexibility, speed, and maintainabilityスケールアップを続ける必要がある。
それはまだ進行中の仕事です - 私たちのアプリにはまだ多くのスタイリングコンポーネントがあります - しかし、私たちのホームページと新しく改装されたコンポーネントでTailwindをライブで見ることは信じられないほど有益です。
HackerNoonは進化しており、私たちのスタイルはそれとともに進化しています。
