CSS-in-JS ライブラリの emotion が気になっている

追記

glamorous が Deprecated になり、emotion への移行が推奨されています。

yami-beta.hateblo.jp

CSS-in-JS

CSS-in-JS ライブラリでは styled-components が有名ですが、最近 emotion というライブラリが気になっています。

www.npmjs.com

注意: emotion をまだちゃんと試していないので以下の内容は公式サイトやドキュメントを見た感想に過ぎません

emotion

emotion も CSS-in-JS ライブラリですが、スタイルの書き方にバリエーションがあるのが特徴です。

以下のように Template literal で記述した CSS を className に渡すパターンや

import { css } from 'emotion'

const color = 'darkgreen'

render(
    <div
        className={css`
            background-color: hotpink;
            &:hover {
                color: ${color};
            }
        `}
    >
        This has a hotpink background.
    </div>
)

（https://emotion.sh/docs/css より）

styled-components と同様に CSS を適用したコンポーネントを生成するパターンがあります。

import styled from 'react-emotion'

const Button = styled('button')`
    color: turquoise;
`

render(<Button>This my button component.</Button>)

（https://emotion.sh/docs/styled より）

個人的な感想

styled-components のコンポーネントごと生成してしまう方法が好みではなかったので、emotion の Template literal で記述した CSS を className に指定する方法が割と良さそうに見えています。
（本当に個人的な理由として styled-components の vim 用シンタックスハイライトである vim-styled-components がだいぶ重たいのが辛いという事情もあります）