[React] Styled Components

💁🏼 どうしてCSS in JSですか.

CSS類名悩み

固定されたガイドラインがなければ、構造は複雑になります.

の膨大なスタイル情報によるローリング地獄は依然として存在する.

はCSSクラス条件スタイルを採用しています.

CSSクラスを用いて条件付き造形を行っても,動的変化の表現は限られている.

😳では、インクラインスタイルを着てはいけませんか.
行内スタイルの場合

CSS概略図(優先度)に問題があります.

厳密にはCSSではありません.

ドキュメント構造を指定するhtmlファイルのボリュームが増加し、CSSファイルのキャラクタから分離するとぼやけてしまいます.(CSS*Webドキュメントのスタイル情報)

Pseudoセレクタは使用できません.(ex. :hover , :after )

メディアqueryでは、鍵フレームも使用できません.

😆解決策:CSSをJSに包んで食べましょう!

<style>
.hash136s21 {
  background-color: black;
  color: white;
}
</style>

<p class="hash136s21">Hello CSS-in-JS</p>

クラス名をハッシュ値として自動的に生成し、クラス名の汚染を防止します.

CSS構文が完全です.

JavaScriptの動的値を完全に使用できます.

CS-In-JSは、文書ではなくコンポーネントとしてCSSを抽象化するのに適している(.css).

は、構成部品とスタイルを1つのファイルに統合し、モジュール化を簡素化します.

最も重要なのは,現代のWebがコンポーネントに基づいて抽象ユニットを構築し発展させていることである.最も人気のあるSPAフレームワーク(

Angular、React、VUEなど)では、コンポーネントを強調しないことが非常に重要な概念であることは説明しにくい事実ではないでしょうか.

🔥なぜStyled Componentsを考えるのですか?

css-in-jsは2018年以来爆発的に増加している.このうちStyled-Componentsは現在最も人気のあるcss-in-jsライブラリであり、npmダウンロード量に準じている.

💪🏻Getting Started

import style from 'styled-components'

render(
	<Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);