CSS-in-JS - styled vs css prop by Glen Maddern (styled-components)

CSS-in-JS の styled と css prop の記法について、styled-components の作者である Glen Maddern 氏による説明が行われた。

https://dev.to/a_sandrina_p/css-in-js-styled-vs-css-prop-229e#comment-1351o

コメントの内容を箇条書きでメモした。

• 最初に styled のアプローチが人気を博したのは styled-components だと思う。

• 最初期 Glamor が持っていた css prop が要求されたが、当時は強く反対した。

  • Glamor との差別化
    • styled-components は Glamor をベースに開発していた。
  • Runtime only のライブラリとして設計されていた。
    • Webpack と連携していた CSS Modules とは意図的に異なり、Babel 変換は不可。
      • css prop を実装できなかった。
  • 1 つだけの方法を望んでいた。
    • 他の選択肢を望むなら Glamor や Emotion を使うべき。

• 現在は css prop をサポートしている。

• React コンポーネントのマークアップからできるだけ多くを削除し、構造とコンテンツだけにしたかった。

  • = 多くのファイル/ディレクトリ、ローカル名を導入すること。
    • これが気に入っていた、誰もがそうではない。
  • 文脈に応じた名前を付けることを目指していた。

  1
  return (
  2
    <Wrapper>
  3
      <Prompt>What is Delicious?</Prompt>
  4
      <Answer>Pizza!</Answer>
  5
    </Wrapper>
  6
  );
  

  • css prop は避けたいノイズが多い

  1
  return (
  2
    <div
  3
      css={{
  4
        display: "flex",
  5
        alignItems: "center",
  6
      }}
  7
    >
  8
      <h2
  9
        css={{
  10
          ...typography.h2,
  11
          ...borders.rounded.black,
  12
        }}
  13
      >
  14
        What is Delicious?
  15
      </h2>
  16
      <p
  17
        css={{
  18
          ...typography.p.grey90.lh14,
  19
          paddingTop: "1rem",
  20
        }}
  21
      >
  22
        Pizza!
  23
      </p>
  24
    </div>
  25
  );
  

  • <div css={Styles.item}>Pizza</div>  のようなケースでは、HTML 要素が明示的であり、CSS とマークアップ（構造とコンテンツ）が分離されおり素晴らしい。