【2022年最新】オススメの CSS in JS まとめ

## はじめに
今回は、2022年までに公開されている、オススメ**CSS in JS**を紹介します。

`Styled Components`や`Emotion`といったメジャーなものから
`Fela`や`Astroturf`といったマイナーなものまでまとめました。

CSS in JSを導入する時の参考や他のCSS in JSを勉強したいときなどの参考になれば嬉しいです。

## CSS in JS とは？
**CSS in JS**とは、外部ファイルでスタイルを定義するのではなく、
JavaScriptを用いて CSSを記述するために設計されたライブラリのことです。

**CSS in JS**を利用することで、コンポーネント内にCSSを定義することができ、
外部のCSSファイルに依存することなく、コンポーネント単体で独立させることができます。

例えば、外部ファイルでスタイルを定義すると、CSSの変更がどこに影響しているか分かりづらいことがよくあります。
それに比べ、**CSS in JS**を利用すると、コンポーネント内にCSSを変更しても他のコンポーネントへの影響がなくなるというわけです。


## CSS in JS まとめ
### 1. [Styled Components](https://styled-components.com/)
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d209e54b-6e39-71fc-1ee4-db81f92b9d3b.png)

Styled Componentsは、利用率も高く、人気のCSS in JSの1つです。

Styled Componentsは、React向けのCSS-in-JSライブラリのひとつで、
テンプレートリテラルとしてCSSを記述するという特徴があり、
内部でCSSをスタイルシートに転記し、自動生成されたクラス名でそれらを参照するようになっています。


Styled Componentsでは、↓このようにスタイルをあてます。
CSSの部分は、Sass記法で記述することができる点も便利です。

```sample.js
import styled from '@emotion/styled'

const Button = styled.button`
  color: red;
  padding: 8px;
`

render(<Button>ボタン</Button>)
```

詳しくは、↓公式サイトをご覧ください。

https://styled-components.com/


　
### 2. [JSS](https://cssinjs.org/)
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ccc4b05f-dfc8-46e0-bdc7-b0a281cff8fd.png)

JSSは、比較的に使われているのCSS in JSの1つです。

JSSは、CSSの宣言を矛盾なく、再利用可能な方法で記述することができ、
ブラウザ、サーバーサイド、Nodeのビルド時にコンパイルすることができます。

また、JSSは、`コア`・`プラグイン`・`フレームワーク`などの複数のパッケージで構成されているため、
フレームワークに依存しないのも特徴です。


JSSでは、↓このようにスタイルをあてます。

```sample.js
import jss from 'jss'
import preset from 'jss-preset-default'

jss.setup(preset())

const styles = {
  button: {
    color: 'red',
    padding: 8
  },
}

const {classes} = jss.createStyleSheet(styles).attach()

document.body.innerHTML = `
  <button class="${classes.button}">ボタン</button>
`
```

詳しくは、↓公式サイトをご覧ください。

https://cssinjs.org/


　
### 3. [Styled JSX](https://github.com/vercel/styled-jsx)
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/971fdb18-6869-b042-2a15-82fe28dccfe0.png)

Styled JSXは、ある程度利用されており、人気のCSS in JSの1つです。

Styled JSXは、JSXにスコープを絞った、コンポーネントに適したCSS in JSです。

また、レンダリング時にスタイルを挿入するため、スタイルを複数回呼び出したり、
未使用なスタイルを削除したりするのも特徴です。


JSSでは、↓このようにスタイルをあてます。
```sample.js
import _JSXStyle from 'styled-jsx/style'

export default () => (
  <button className="style">ボタン</button>
  <_JSXStyle>{`
    .style {
      color: red;
      padding: 8px;
    }
  `}</_JSXStyle>
)
```

詳しくは、↓GitHubをご覧ください。
https://github.com/vercel/styled-jsx
　
### 4. [Emotion](https://emotion.sh/docs/introduction)
![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b1e90127-2a93-af48-1397-4097b30dc1c5.png)

Emotionは、ある程度利用されており、人気のCSS in JSの1つです。

Emotionは、`source maps`・`labels`・`testing utilities`などの機能があることで開発しやすく、 
パワプルで予測しやすいCSSで記述できます。

また、String と Style Object 両方の書き方に対応しているため、
プロジェクトに応じて、柔軟に書き方を変えることができるのも特徴の1つです。

Emotionでは、↓このようにスタイルをあてます。
```sample.js
import css from '@emotion/css'

render(
  <button
    className={css`
      color: red;
      padding: 8px;
    `}
  >
    ボタン
  </button>
)
```

詳しくは、↓公式サイトをご覧ください。

https://emotion.sh/docs/introduction


　
### 5. [CSS Modules](https://github.com/css-modules/css-modules)
![image5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2126fbf4-9ae6-f904-09cc-76e92bb15ac5.png)

CSS Modulesは、利用率も高く、人気のCSS in JSの1つです。

CSS Modulesは、CSSファイルをimportする形でスタイルを指定することが、
既存プロジェクトにCSS in JSを導入するのには簡単です。

また、コンポーネントファイルとCSSファイルを分けるため、
HTMLで書いて、スタイルを当てるように記載できるのも特徴です。


CSS Modulesでは、↓このようにスタイルをあてます。
```sample.css
.button{
  color: red;
  padding: 8px;
}
```

```sample.js
import React from 'react'
import styles from './sample.css'

export const Button: React.FC = ({ children }) => (
  <button className={styles.button}>{children}</button>
)
```

詳しくは、↓GitHubをご覧ください。
https://github.com/css-modules/css-modules

　
### 6. [Styled System](https://styled-system.com/)
![image6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/fb73ca1b-0bf8-0698-5dfa-61928acb2821.png)

Styled Systemは、Reactコンポーネントにスタイルプロパティを追加するユーティリティ関数の集めて、
タイポグラフィ スケール、色、およびレイアウトプロパティを使用してグローバル テーマ オブジェクトに基づいてスタイルを制御できます。

また、Styled ComponentsやEmotionなどのCSS-in-JSライブラリを併用し、
スタイルに一貫性のあるUIコンポーネントを作成しやすい特徴があります。

Styled Systemでは、↓このようにスタイルをあてます。
(今回は、Styled Componentsを併用している程でsampleを記載します。)
```sample.js
import styled from 'styled-components'
import { space, color } from 'styled-system'

const Button = styled.button`
  ${color}
  ${space}
`

render(
  <Button color={'red'} p={8}>ボタン</Button>
)

```

詳しくは、↓公式サイトをご覧ください。

https://styled-system.com/


　
### 7. [Stitches](https://stitches.dev/)
![image7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/bc7b0f93-310b-e409-9c6d-51fb92f62585.png)

Stitchesは、ランタイムがほぼゼロを謳っており、他のCSS in JSより高速で、
パフォーマンスに重点おいて開発されたCSS in JSです。

また、VariantsやToken、theme機能をサポートしておいるため。
デザインシステムの構築と運用に適しているというのも特徴です。

Stitchesでは、↓このようにスタイルをあてます。

```sample.js
import { styled } from '@stitches/react';

const Button = styled('button', {
  color: 'red',
  padding: '8px',
});

```

詳しくは、↓公式サイトをご覧ください。

https://stitches.dev/

　
### 8. [Fela](https://fela.js.org/)
![image8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9eef6a47-14f0-a30f-1aa4-4c9b85c2688c.png)

Felaは、状態駆動型のスタイリングを処理するための、小さく、高性能で、フレームワークに依存しないツールベルトです。

また、アプリケーションの状態に応じてスタイルをレンダリングするため
CSSの量を制限して、再利用性が確保されるのも特徴です。

Felaでは、↓このようにスタイルをあてます。
```sample.js
import * as React from 'react';
import { useFela } from 'react-fela';

const rule = () => ({
  color: 'red',
  padding: '8px',
});

function Button({ children, ...props }) {
  const { css } = useFela(props);

  return <button className={css(rule)}>{children}</button>
}
```

詳しくは、↓公式サイトをご覧ください。

https://fela.js.org/

　
### 9. [Linaria](https://github.com/callstack/linaria)
![image9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b69fabb9-8374-d390-49dc-83f688061843.png)

Linariaは、styled-components のように、テンプレートリテラルの中に CSS をそのまま記述できるます。

また、ビルド時に静的にCSSファイルを生成し、実行時にそれを読み込むため、一般的にstyled-componentsよりも高速だと言われているのも特徴です。

```sample.js
import { css } from '@linaria/core';

const style = css`
  color: red;
  padding: 8px;
`;

function Button() {
  return <button className={style}>ボタン</button>;
}
```

詳しくは、↓GitHubをご覧ください。
https://github.com/callstack/linaria

　
### 10. [Astroturf](https://4catalyzer.github.io/astroturf/introduction/)
![image10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/48980573-8a9f-f6f2-b18f-eae193e3d190.png)

Astroturfは、ランタイムレイヤーを追加せずに、既存のCSS処理パイプラインで、JavaScriptファイル内にCSSを記述することができます。

Astroturfでは、↓このようにスタイルをあてます。
```sample.js
import React from "react";
import { css } from "astroturf";

const style = css`
  color: red;
  padding: 8px;
`;

export default function Button({ children }) {
  return <button className={style}>{children}</button>;
}
```

詳しくは、↓公式サイトをご覧ください。

https://4catalyzer.github.io/astroturf/introduction/

　
### 11. [Twin](https://github.com/ben-rogerson/twin.macro)
![image11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/a172b428-a35e-67ba-1f5a-902702ef158d.png)

Twinは、Tailwindのクラスを使用して、スタイルを指定し、サポートされている任意のCSS-in-JSライブラリにコンパイルできます。

またTwinでは、CSSオブジェクトに変換してからCSS-in-JSライブラリに渡しているため、クライアントバンドルの追加は不要なのも特徴です。

Twinでは、↓このようにスタイルをあてます。
```sample.js
import tw from "twin.macro";

const Button = tw.button`
  text-red-600 p-8
`; 

function App() {
  return (
   <Button> ボタン </Button>
  );
}
```

詳しくは、↓GitHubをご覧ください。
https://github.com/ben-rogerson/twin.macro

　
### 12. [Theme UI](https://theme-ui.com/)
![image12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/6a3e31da-f57e-02e0-e165-c1b39a211c24.png)

Theme UI は、制約ベースの設計原理に基づいて、テーマに対応したユーザインタフェースを作成するためのライブラリです。

また、カスタムコンポーネントライブラリやデザインシステム、Webアプリケーションなどを、最高の開発者エルゴノミクスのための柔軟なAPIで構築できるのも特徴です。

Theme UIでは、↓このようにスタイルをあてます。
```sample
import { ThemeProvider } from 'theme-ui'
import { theme } from './theme'

export const App = () => (
  <ThemeProvider theme={theme}>
    <button
      sx={{
        color: 'red',
        p: 8,
      }}>
      ボタン
    </button>
  </ThemeProvider>
)
```

詳しくは、↓公式サイトをご覧ください。

https://theme-ui.com/

　
### 13. [vanilla-extract](https://vanilla-extract.style/)
![image13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2b866739-f7d8-577b-fb11-f8cac298d06a.png)
vanilla-extractは、TypeScript のランタイムがないスタイルシートを作成するCSS in JSです。

ローカルスコープのクラス名とCS 変数を使用して TypeScriptでスタイルを記述し、ビルド時に静的 CSS ファイルを生成します。

vanilla-extractでは、↓このようにスタイルをあてます。
```styles.css.ts
import { createTheme, style } from '@vanilla-extract/css';

export const [themeClass, vars] = createTheme({
  color: {
    brand: 'red'
  },
});

export const buttonStyle = style({
  color: vars.color.brand,
  padding: 8,
});

```

```app.ts
import { themeClass, buttonStyle } from './styles.css.ts';

document.write(`
  <section class="${themeClass}">
    <button class="${buttonStyle}">ボタン</button>
  </section>
`);
```

詳しくは、↓公式サイトをご覧ください。

https://vanilla-extract.style/


## まとめ
いかがだったでしょうか。

ぜひ今回紹介した**CSS in JS**を導入する時や新しく勉強する時などの参考にしていただき、
フロントエンドの開発体験を向上させていきましょう！

https://qiita.com/official-events/5fdc281997d5754d8ac9

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510