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コンポーネントのマークアップからできるだけ多くを削除し、構造とコンテンツだけにしたかった。

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

  return (
    <Wrapper>
      <Prompt>What is Delicious?</Prompt>
      <Answer>Pizza!</Answer>
    </Wrapper>
  );

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

  return (
    <div
      css={{
        display: "flex",
        alignItems: "center",
      }}
    >
      <h2
        css={{
          ...typography.h2,
          ...borders.rounded.black,
        }}
      >
        What is Delicious?
      </h2>
      <p
        css={{
          ...typography.p.grey90.lh14,
          paddingTop: "1rem",
        }}
      >
        Pizza!
      </p>
    </div>
  );

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