372文字
2分
編集

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

#CSS-in-JS #styled-components #Emotion #Glamor #CSS Modules

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

    • = 多くのファイル/ディレクトリ、ローカル名を導入すること。
      • これが気に入っていた、誰もがそうではない。
    • 文脈に応じた名前を付けることを目指していた。
    jsx
    return (
  <Wrapper>
    <Prompt>What is Delicious?</Prompt>
    <Answer>Pizza!</Answer>
  </Wrapper>
);
    • css prop は避けたいノイズが多い
    jsx
    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 とマークアップ（構造とコンテンツ）が分離されおり素晴らしい。
編集