スタイル付きコンポーネントの5分間の紹介

CSSは奇妙です。 15分で基本を学ぶことができます。しかし、スタイルを整理するための良い方法を見つけるまでには何年もかかることがあります。

これの一部は、言語自体の癖によるものです。デフォルトでは、CSSは非常に限定されており、変数、ループ、または関数はありません。同時に、要素、クラス、ID、またはこれらの任意の組み合わせをスタイル設定できるという点で非常に寛容です。

混oticとしたスタイルシート

おそらくあなた自身が経験したように、これは多くの場合カオスのレシピです。また、SASSやLESSなどのプリプロセッサは多くの便利な機能を追加しますが、CSSの無秩序状態を止めるために実際には多くのことを行いません。

この組織の仕事はBEMのような方法論に任されていました。これは便利ですが、完全にオプションであり、言語またはツールレベルで実施することはできません。

CSSの新しい波

数年前に進むと、JavaScriptベースのツールの新しい波が、CSSの記述方法を変更することにより、これらの問題を根本から解決しようとしています。

Styled Componentsはこれらのライブラリの1つであり、革新性と親しみやすさが混在しているため、すぐに多くの注目を集めています。したがって、Reactを使用している場合(および使用していない場合は、JavaScriptの学習計画とReactの概要を確認してください)、この新しいCSSの代替案を検討する価値があります。

私は最近それを使用して個人用サイトを再設計しましたが、今日はその過程で学んだことをいくつか共有したいと考えました。

コンポーネント、スタイル付き

スタイル付きコンポーネントについて理解する必要がある主なことは、その名前は文字通りに取るべきだということです。クラスまたはHTML要素に基づいてHTML要素またはコンポーネントをスタイリングしなくなりました。

Hello World

h1.title {
  フォントサイズ:1.5em;
  色:紫;
}

代わりに、独自のカプセル化されたスタイルを持つスタイル付きコンポーネントを定義しています。次に、これらをコードベース全体で自由に使用しています:

「styled-components」からスタイル化されたインポート。
constタイトル= styled.h1`
  フォントサイズ:1.5em;
  色:紫;
`;
<タイトル> Hello World 

これは小さな違いのように思えるかもしれませんが、実際には両方の構文は非常に似ています。しかし、両者の主な違いは、スタイルがコンポーネントの一部になったことです。

つまり、コンポーネントとそのスタイルの間の中間ステップとしてCSSクラスを取り除きます。

styled-componentsの共同作成者であるMax Stoiberは次のように述べています。

「スタイル付きコンポーネントの基本的な考え方は、スタイルとコンポーネント間のマッピングを削除することにより、ベストプラクティスを実施することです。」

オフロードの複雑さ

HTML要素を直接スタイリングする代わりに(タグを覚えていますか?)CSSを使用する全体のポイントは、この中間クラスレイヤーを導入することでスタイルとマークアップを分離することなので、これは最初は直感に反します。

しかし、その分離は多くの複雑さも生み出し、CSSと比較して、そのような複雑さを処理するためにJavaScriptのような「本物の」プログラミング言語のほうがはるかに優れているという主張があります。

クラスの小道具

このノークラスの哲学に沿って、styled-componentsは、コンポーネントの動作をカスタマイズすることになると、クラスよりも小道具を使用します。代わりに:

Hello World //青になります

h1.title {
  フォントサイズ:1.5em;
  色:紫;
  
  &.primary {
    青色;
  }
}

あなたは書くだろう:

constタイトル= styled.h1`
  フォントサイズ:1.5em;
  色:$ {props => props.primary? 'blue': 'purple'};
`;
 Hello World </ Title> //青になります</pre><p>ご覧のとおり、styled-componentsを使用すると、CSSおよびHTML関連の実装の詳細をすべて排除して、Reactコンポーネントをクリーンアップできます。</p><p>とはいえ、styled-components CSSは依然としてCSSです。そのため、このようなものも完全に有効な(わずかに非正統的ではありますが)コードです。</p><pre>constタイトル= styled.h1`
  フォントサイズ:1.5em;
  色:紫;
  
  &.primary {
    青色;
  }
`;</pre><pre><Title className = "primary"> Hello World </ Title> //青になります</pre><p>これは、スタイル付きコンポーネントを非常に簡単に使用できるようにする機能の1つです。疑わしい場合は、いつでも自分の知っているものにフォールバックできます。</p><h3>注意事項</h3><p>また、スタイル付きコンポーネントはまだ若いプロジェクトであり、一部の機能はまだ完全にサポートされていないことに言及することも重要です。たとえば、親から子コンポーネントのスタイルを設定する場合は、現時点ではCSSクラスを使用する必要があります(少なくともstyled-components v2が登場するまで)。</p><p>スタイルを手動で注入することで間違いなく可能ですが、サーバー上でCSSを事前にレンダリングする「公式」な方法はまだありません。</p><p>また、スタイル付きコンポーネントが独自のランダム化されたクラス名を生成するという事実により、ブラウザーの開発ツールを使用して、スタイルが最初に定義されている場所を把握することが難しくなります。</p><p>しかし、非常に心強いのは、スタイルコンポーネントコアチームがこれらすべての問題を認識しており、それらを1つずつ修正することに一生懸命取り組んでいることです。バージョン2は近日公開予定です。本当に楽しみにしています。</p><h3>もっと詳しく知る</h3><p>ここでの私の目標は、スタイル付きコンポーネントがどのように機能するかを詳細に説明することではなく、チェックしてみる価値があるかどうかを自分で判断できるように、少しだけ垣間見ることです。</p><p>好奇心をそそられたなら、ここでスタイル付きコンポーネントの詳細を学ぶことができます:</p><ul><li>Max Stoiberは最近、Smashing Magazineのスタイル付きコンポーネントの理由に関する記事を書きました。</li><li>styled-componentsリポジトリ自体には、広範なドキュメントがあります。</li><li>Jamie Dixonによるこの記事では、スタイル付きコンポーネントに切り替えることのいくつかの利点について概説します。</li><li>ライブラリの実際の実装方法について詳しく知りたい場合は、Maxによるこの記事を参照してください。</li></ul><p>さらに詳しく知りたい場合は、Glamourをチェックすることもできます。Glamourは、新しいウェーブCSSの別の見方です!</p><p>セルフプロモーションの時間:Novaを支援するオープンソースの貢献者を探しています。これは、フォーム、データの読み込み、ユーザーアカウントを備えたフルスタックのReact&GraphQLアプリを作成する最も簡単な方法です。スタイル付きコンポーネントはまだ使用していませんが、それらを最初に実装することができます!</p></div><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3845662922897763" data-ad-slot="9806544668" data-ad-format="link" data-full-width-responsive="true"></ins><div class="neighbor-articles"><h4 class="ui header">こちらもご覧ください</h4><a href="/design/building-a-color-palette-framework-76db07/" title="カラーパレットフレームワークの構築">カラーパレットフレームワークの構築</a><a href="/design/design-thinking-a-manual-for-innovation-d0eeae/" title="デザイン思考:革新のためのマニュアル">デザイン思考:革新のためのマニュアル</a><a href="/design/mind-the-gap-41a878/" title="隙間に気をつけて">隙間に気をつけて</a><a href="/design/how-we-designed-page-previews-for-wikipedia-and-what-could-be-done-with-them-in-the-future-af861f/" title="ウィキペディアのページプレビューをどのように設計したか—将来それらで何ができるか">ウィキペディアのページプレビューをどのように設計したか—将来それらで何ができるか</a><a href="/design/introducing-boosts-an-all-new-way-to-show-your-support-in-basecamp-fde145/" title="Boostsの紹介:Basecampでサポートを表示するまったく新しい方法">Boostsの紹介:Basecampでサポートを表示するまったく新しい方法</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="vn flag"></i></a><a href="https://uk.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ua flag"></i></a><a href="https://tr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="tr flag"></i></a><a href="https://th.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="th flag"></i></a><a href="https://sv.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ch flag"></i></a><a href="https://sr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="rs flag"></i></a><a href="https://sl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="si flag"></i></a><a href="https://sk.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="sk flag"></i></a><a href="https://ru.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ru flag"></i></a><a href="https://ro.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ro flag"></i></a><a href="https://pt.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="pt flag"></i></a><a href="https://pl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="pl flag"></i></a><a href="https://de.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="de flag"></i></a><a href="https://ar.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="sa flag"></i></a><a href="https://bg.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="bg flag"></i></a><a href="https://cs.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="cz flag"></i></a><a href="https://highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="dk flag"></i></a><a href="https://el.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="gr flag"></i></a><a href="https://es.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="es flag"></i></a><a href="https://et.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ee flag"></i></a><a href="https://fi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="fi flag"></i></a><a href="https://fr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="fr flag"></i></a><a href="https://hi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="in flag"></i></a><a href="https://hr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="hr flag"></i></a><a href="https://hu.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="hu flag"></i></a><a href="https://id.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="id flag"></i></a><a href="https://it.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="it flag"></i></a><a href="https://ko.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="kr flag"></i></a><a href="https://lt.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="lt flag"></i></a><a href="https://lv.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="lv flag"></i></a><a href="https://ms.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="my flag"></i></a><a href="https://nl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="nl flag"></i></a><a href="https://no.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="no flag"></i></a><a href="https://uz.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="uz flag"></i></a></div>highresolution-wallpapers.net<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>