LoginSignup
21
19
@degudegu2510(出口 裕貴 | Qiita)inQiita株式会社

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

Last updated at Posted at 2022-10-15

はじめに

今回は、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

image1.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>)

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

　

2. JSS

image2.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>
`

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

　

3. Styled JSX

image3.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

image4.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>
)

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

　

5. CSS Modules

image5.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

image6.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>
)

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

　

7. Stitches

image7.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',
});

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

　

8. Fela

image8.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>
}

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

　

9. Linaria

image9.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

image10.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>;
}

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

　

11. Twin

image11.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

image12.png

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

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

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

import { ThemeProvider } from 'theme-ui'
import { theme } from './theme'

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

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

　

13. vanilla-extract

image13.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>
`);

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

まとめ

いかがだったでしょうか。

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

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

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

21
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
21
19