ymdman.com

CSS in JSを比較検討してみる

とりあえず気になったやつの特徴だけメモる。

Emotion

  • このブログでも使用しているが↓が良い
  • css propで通常のCSSと同じように書くことができる
  • SSR環境だと導入に手こづりそう
const style = css`
  width: 200px;
`

<div css={style} />

Vanilla Extract

  • Zero-runtime CSS in JSでパフォーマンスが良いらしい (JavaScript内に書けるがビルド時に独立したCSSとして出力する)
  • CSS modulesと同じような書き方
  • *.css.ts という名前のファイルをCSSとしてexportする
// *.css.ts
import { style } from '@vanilla-extract/css';

export const hogeStyle = style({
  width: '200px',
})

// .tsx
<div className={hogeStyle} />

Linaria

  • Zero-runtime CSS in JSでパフォーマンスが良いらしい (JavaScript内に書けるがビルド時に独立したCSSとして出力する)
  • styled-componentsと同じような書き方(Emotionみたいな書き方もできるっぽい)
  • stylelintが効くらしい
  • Airbnbも採用しているらしい (参考: https://medium.com/airbnb-engineering/airbnbs-trip-to-linaria-dc169230bd12)
const style = css`
  width: 200px;
`;

<div className={style} />;