「CSSは奇妙なものです。 15分で基本を学ぶことができますが、スタイルを整理するための良い方法を見つけるには何年もかかることがあります。
これは、部分的には言語自体の機能によるものです。 元の形式では、CSSはかなり制限されており、変数、ループ、関数はありません。 同時に、要素、クラス、ID、またはそれらの任意の組み合わせをスタイルする機能を提供して、手を結び付けます。
混oticとしたスタイルシート
すでに自分で経験しているに違いないので、これはしばしば完全な混乱につながります。 SASSやLESSなどのプリプロセッサは多くの便利な機能を追加しますが、CSSの無秩序状態を抑制することはできません。
この組織的な作業は、BEMなどの方法論によって提供されました。これは、この点では便利ですが、必須ではなく、言語またはツールレベルでより普遍的に実装することはできません。
CSSニューウェーブ
数年早送り：JavaScriptベースのツールの新しい波は、CSSの記述方法を変更することにより、これらの問題を根本的に解決しようとしています。
Styled Componentsは、革新と親しみが内在するため、大衆の注目を急速に集めたこれらのライブラリの1つです。 したがって、Reactを使用している場合（およびそうでない場合は、私の記事「 JavaScriptカリキュラム 」および「 Reactの概要 」を読むことをお勧めします）、このCSSの代替案を必ず見てください。
最近、Styled Componentsを使用して個人用サイトを再設計しましたが、作業中に強調した点をいくつか共有したいと思います。
コンポーネント、スタイル付き
スタイル付きコンポーネントを使用する際に留意すべき主なことは、名前をほぼ文字通り理解する必要があるということです。 クラスまたはHTML要素に基づいてHTML要素またはコンポーネントのスタイルを設定しなくなりました。
<h1 className="title">Hello World</h1> h1.title{ font-size: 1.5em; color: purple; }
代わりに、独自のカプセル化されたスタイルを持つ定型化されたコンポーネントを定義します。 次に、コード全体でこれらのスタイルを自由に使用します。
import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; color: purple; `; <Title>Hello World</Title>
違いは小さいようで、実際、両方の構文は非常に似ています。 ただし、主な違いは、スタイルがコンポーネントの一部になったことです。 つまり、コンポーネントとそのスタイルの間の中間ステップとしてCSSクラスを取り除きます。
Styled-componentsの作成者の1人であるMax Stoiberは次のように述べています。
「スタイル付きコンポーネントの基本的な考え方は、スタイルとコンポーネント間のマッピングを削除することにより、ベストプラクティスを実装することです。」
難易度の削減
HTML要素を直接スタイリングする代わりにCSSを使用する（フォントタグを覚えていますか？）ことの全体のポイントは、クラスを中間層として導入することでスタイルとマークアップを分離することだったため、最初はこれは非論理的です
しかし、そのような切断は多くの困難を生み出し、これに基づいて、JavaScriptなどの「実際の」プログラミング言語はCSSよりもこれらの困難を解決するのに適していると主張することができます。
クラスではなく小道具
この「非クラス」の哲学に従って、スタイル付きコンポーネントは、コンポーネントの動作のカスタマイズに関連するすべてのために、クラスの代わりに小道具を使用します。
代わりに：
<h1 className="title primary">Hello World</h1> // will be blue h1.title{ font-size: 1.5em; color: purple; &.primary{ color: blue; } }
あなたはこれを書きます：
const Title = styled.h1` font-size: 1.5em; color: ${props => props.primary ? 'blue' : 'purple'}; `; <Title primary>Hello World</Title> // will be blue
ご覧のとおり、styled-componentsを使用すると、Reactでコンポーネントをクリーンアップして、CSSおよびHTMLの実装に関連するすべてのものを取得できます。
ただし、styled-components CSSもCSSです。 したがって、あまり一般的ではありませんが、このコードもまったく受け入れられます。
const Title = styled.h1` font-size: 1.5em; color: purple; &.primary{ color: blue; } `; <Title className="primary">Hello World</Title> // will be blue
これは、スタイル付きコンポーネントを非常に理解しやすいツールにする機能の1つです。疑問が忍び込んだとき、いつでも自分の知っているものに戻ることができます。
ご予約
また、スタイル付きコンポーネントはまだ若いプロジェクトであり、その機能の一部はまだ完全にはサポートされていないことに注意することも重要です。 たとえば、子の親コンポーネントのスタイルを繰り返したい場合は、現時点で（少なくともstyled-components v2が出るまで）CSSクラスを使用する必要があります。
また、現時点では、サーバー上のCSSを事前にレンダリングする「合法的な」方法はありませんが、スタイルを手動で導入することで確実に行うことができます。
さらに、スタイル付きコンポーネントは独自のランダムなクラス名を作成するため、ブラウザーの「開発ツール」を使用してスタイルの初期位置を見つけるのが困難になる場合があります。
しかし、開発チームがこれらの問題を認識しており、それらを修正するために積極的に取り組んでいることは明らかに勇気づけられます。 2番目のバージョンはまもなく登場し、本当に楽しみにしています！
詳細をご覧ください
この記事での私の目標は、スタイル付きコンポーネントがどのように機能するかを詳細に説明することではなく、興味があるかどうかを判断できるように少しのヒントを与えることです。
私があなたに興味をそそることができたなら、スタイル化されたコンポーネントについてもっと学ぶことができるいくつかのリソースがあります：
- Max Stoiberは最近、 Smashing Magazineでスタイル付きコンポーネントの意味に関する記事を書きました。
- styled-components リポジトリ自体には、広範なドキュメントがあります。
- Jamie Dixonの記事は、スタイル付きコンポーネントを使用するいくつかの利点を明らかにしています
- ライブラリが実際にどのように機能するかについて詳しく知りたい場合は、Maxによるこの記事をお読みください 。
また、突然このトピックを深く掘り下げたい場合は、 Glamour（新しい波のCSSの別の外観）をご覧ください！