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

About Author

コメント

ラベル

この記事は

Related Stories

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps