TrewindJSのスタイルコンポーネント

数日前、私は新しいブログ記事を投稿しました.私はスタイルのコンポーネントとの経験を詳細に説明しました.また、CSSファイルから離れているJSドメインにダイナミックなスタイリングを組み込む良い方法でした.私は後でスタイリングをあなたのアプリケーションに組み込むもう一つの方法について知りました.それはtailwindcssでした.
私は以前、このあたりでいくつかの会話を見ました、そして、多くのビデオとポストがTrereWindCsに言及しているのを見ましたが、それ以外の何も考えませんでした.それで、私は再びそれについて言われて、私も私の経験を比較することができたように、それを試してみたかったように見えます.私はスタイリングのための風車を使用してウェブサイトを構築することを決めた.

私は何を基礎として知っている必要がありますか?
あなたが始めるために、これを理解することは、それを知っていることが重要です:

TailWindCSSは、しかし、あなたのコンポーネントをスタイルに事前に構築されたクラスのパッケージは、彼らはあなたがそれらと何かを行うことができるように柔軟性があります!

Cookiesを使用するCSSを知る必要はありません.

TailWindCSSは多くの略語を使用しています(PBは底を埋めています)ので、あなたがこれまでにわからないならば、あなたがドキュメンテーションを読んで、その検索機能を使うことは重要です.

……ブートストラップのような?
私は、Tailwindの私の最初の印象が肯定的であると言わなければなりません.これは、ブートストラップの意味論の多くを受け取り、ほとんどの彼らはスタイリングの違いをトグルするために直接CSSでのメディアクエリを使用する必要はありませんので、大いに拡張している.代わりに、以下のようにします.

<div class="pb-10 sm:pb-12 md:pb-8 lg:pb-4">
    Hello world
</div>

材料UI、ブートストラップなどの前にスタイリングフレームワークを使用している人には、これらの異なるメディアブレークポイント(SM、MD、LGなど)の使用を理解します.私のデバイスサイズが小さいときは、10のパディングボトムを適用します.私のデバイスサイズが小さい(SM)またはより大きいとき、12のパッド底を適用してください.私のデバイスサイズが媒体(MD)以上の場合は8のパディングボトムを適用します.私のデバイスサイズが大きい(LG)以上の場合、4 'のパディングボトムを適用します.私は言わなければなりません、例えば、あなたが典型的にbootstrapで見つけるものである' xs 'ブレークポイントがないと言うテクニックを本当に理解するのに、私はしばらくかかりました.単にSMより低いどんな装置でも、上記の「PB - 10」のようなメディアブレークポイントなしでTarwindクラスを継承します.

しかし、ハングアップ.それはたくさんのクラスのようですね.
それは本当です、そして、それはフレームワークの私の見解に少しの湿気を置いた何かです.多くのユーティリティクラスが各要素に追加されているので、巨大なクラスのプロパティ値で終わるのはとても簡単です.これは、必ずしも必要とされていない要素に残っている無駄なクラスのようなものを簡単に引き起こすことができます.使用する良いパッケージはクラス名をまとめたclassNamesパッケージです.あなたの要素を少しクリーナーをフォーマットすることができます.

どのようにTailWindCSSスタイルのコンポーネントに比較しますか?
私が本当にスタイルの部品について好きだったものは、それがあなたの構成要素をどのように作ったかということでした.スタイルのdivとリファレンスを作成することができます.

const Wrapper = styled.div`
padding-bottom: 10px;
@media (min-width: 768px) {
    padding-bottom: 20px;
}
`;

const TestComponent = () => (
    <Wrapper>
        Hello world!
    </Wrapper>
);

これは私にとって、コンポーネントコードをきれいにして、コンポーネントがロジックに集中して、見えないように簡潔にしておきます.あなたはさらに一歩一歩行くことができ、あなたのコンポーネントドメイン内の別のJSファイルにあなたのスタイルを抽象的に.しかし、これはTailWindCSSのように見えます.

const TestComponent = () => (
    <div className="pb-10 md:pb-20">
        Hello World!
    </div>
);

ここで見ることができるように、TailWindCSSは実際に同じゴールを達成するために書くコードの数を減らします.これはユーティリティクラスのアプローチでの全体の意図です.これは本当にスタイルの要素を書く簡素化します.しかし、これはすべての良いといくつかのスタイルだけで私たちの要素に適しています.よりスタイルの高いコンポーネントの比較を見てみましょう.
スタイルコンポーネント

const Button = styled.button`
    font-size: 1rem;
    margin: 1rem;
    padding: 1rem 1rem;
    @media (min-width: 768px) {
        padding: 2rem 2rem;
    }
    border-radius: 0.25rem;
    border: 2px solid blue;
    background-color: blue;
    color: white;
`;

const TestComponent = () => (
    <>
        <Button>
            Hello world!
        </Button>
    </>
);

立木

const TestComponent = () => (
    <div className="text-base mg-1 pt-1 pr-1 md:pt-2 md:pr-2 rounded border-solid border-2 border-light-blue-500 bg-blue-500 text-white-500">
        Hello World!
    </div>
);

上記の比較から分かるように、スタイルコンポーネントは本当にスタイルのルールで成長しているので、私たちのコンポーネントをリードします.Tailwindの実装は、クラス名では冗長であり、classNamesのようなパッケージを使用することなく、実際には私たちのラインをもっと長くする必要があります.これは私の意見で最大の下降の1つです.
特に、複数の開発者と一緒にプロジェクトに取り組んでいる場合は、スタイルコンポーネントのアプローチを使用すると、ボタンコンポーネントがどのようなスタイルを簡単に読むことができます.テールウインドアプローチと比較して、あなたはたぶん正確な値を理解するためにそれらのUtilクラスのいくつかのドキュメントで検索する必要があります.
この例を最初の例に比較してください.Trewindだけでシンプルさを叫んだ.このフォローアップの例は複雑さとスパゲティコードの高いリスクから成ります.これは、複数の開発者が同時に簡単に台無しにする/スタイルのために同時にいくつかのコンポーネントに取り組んでいるし、ルートの原因を見つけるために特定のUtilクラスを削除する時間を費やしている.我々がまだ我々の生のCSS変化に頼るものをするスタイルの構成要素方法と比較して、それは私の意見の変化を管理するのがより簡単です.

それで、誰がトロフィーを家に連れて行きますか?
まあ正直に言うと、私はこれらの2つのどちらかをお互いとは言いません.両方とも、この記事で実証された彼らの利点と欠点を持ちます.私は、あなたがスタイルのウェブサイトまたは多くの複雑さでただ一つのページャーへの速い方法を探しているならば、言いますToodWinCssあなたに最適かもしれない.主にユーティリティの量のためにあなたのクラスのスタイルをボックスから取得します.しかし、より簡単に維持することができる長期的なプロジェクトを探している場合.私は、私の意見でスタイルを維持するとき、それが彼らのより「堅牢な」感じによって、スタイルの部品を勧めます.しかし、私はそれらのいずれかの専門家ではない、私は単にこれらの技術の両方で構築されている、これらは私の最初の考えです.

有用なリソース
TailWinCSS :
https://tailwindcss.com/
https://www.tailwindtoolbox.com/
https://tailwindcomponents.com/
スタイルコンポーネント
https://styled-components.com/
読んでいただきありがとうございます、これらのいずれかまたは多分両方を使用している場合、どのようにそれらを使用して発見した以下のコメントでお知らせください!👇