はじめに
今回は、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
Styled Componentsは、利用率も高く、人気のCSS in JSの1つです。
Styled Componentsは、React向けのCSS-in-JSライブラリのひとつで、
テンプレートリテラルとしてCSSを記述するという特徴があり、
内部でCSSをスタイルシートに転記し、自動生成されたクラス名でそれらを参照するようになっています。
Styled Componentsでは、↓このようにスタイルをあてます。
CSSの部分は、Sass記法で記述することができる点も便利です。
import styled from '@emotion/styled'
const Button = styled.button`
color: red;
padding: 8px;
`
render(<Button>ボタン</Button>)
詳しくは、↓公式サイトをご覧ください。
2. JSS
JSSは、比較的に使われているのCSS in JSの1つです。
JSSは、CSSの宣言を矛盾なく、再利用可能な方法で記述することができ、
ブラウザ、サーバーサイド、Nodeのビルド時にコンパイルすることができます。
また、JSSは、コア・プラグイン・フレームワークなどの複数のパッケージで構成されているため、
フレームワークに依存しないのも特徴です。
JSSでは、↓このようにスタイルをあてます。
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
Styled JSXは、ある程度利用されており、人気のCSS in JSの1つです。
Styled JSXは、JSXにスコープを絞った、コンポーネントに適したCSS in JSです。
また、レンダリング時にスタイルを挿入するため、スタイルを複数回呼び出したり、
未使用なスタイルを削除したりするのも特徴です。
JSSでは、↓このようにスタイルをあてます。
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
Emotionは、ある程度利用されており、人気のCSS in JSの1つです。
Emotionは、source maps・labels・testing utilitiesなどの機能があることで開発しやすく、
パワプルで予測しやすいCSSで記述できます。
また、String と Style Object 両方の書き方に対応しているため、
プロジェクトに応じて、柔軟に書き方を変えることができるのも特徴の1つです。
Emotionでは、↓このようにスタイルをあてます。
import css from '@emotion/css'
render(
<button
className={css`
color: red;
padding: 8px;
`}
>
ボタン
</button>
)
詳しくは、↓公式サイトをご覧ください。
5. CSS Modules
CSS Modulesは、利用率も高く、人気のCSS in JSの1つです。
CSS Modulesは、CSSファイルをimportする形でスタイルを指定することが、
既存プロジェクトにCSS in JSを導入するのには簡単です。
また、コンポーネントファイルとCSSファイルを分けるため、
HTMLで書いて、スタイルを当てるように記載できるのも特徴です。
CSS Modulesでは、↓このようにスタイルをあてます。
.button{
color: red;
padding: 8px;
}
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
Styled Systemは、Reactコンポーネントにスタイルプロパティを追加するユーティリティ関数の集めて、
タイポグラフィ スケール、色、およびレイアウトプロパティを使用してグローバル テーマ オブジェクトに基づいてスタイルを制御できます。
また、Styled ComponentsやEmotionなどのCSS-in-JSライブラリを併用し、
スタイルに一貫性のあるUIコンポーネントを作成しやすい特徴があります。
Styled Systemでは、↓このようにスタイルをあてます。
(今回は、Styled Componentsを併用している程でsampleを記載します。)
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
Stitchesは、ランタイムがほぼゼロを謳っており、他のCSS in JSより高速で、
パフォーマンスに重点おいて開発されたCSS in JSです。
また、VariantsやToken、theme機能をサポートしておいるため。
デザインシステムの構築と運用に適しているというのも特徴です。
Stitchesでは、↓このようにスタイルをあてます。
import { styled } from '@stitches/react';
const Button = styled('button', {
color: 'red',
padding: '8px',
});
詳しくは、↓公式サイトをご覧ください。
8. Fela
Felaは、状態駆動型のスタイリングを処理するための、小さく、高性能で、フレームワークに依存しないツールベルトです。
また、アプリケーションの状態に応じてスタイルをレンダリングするため
CSSの量を制限して、再利用性が確保されるのも特徴です。
Felaでは、↓このようにスタイルをあてます。
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
Linariaは、styled-components のように、テンプレートリテラルの中に CSS をそのまま記述できるます。
また、ビルド時に静的にCSSファイルを生成し、実行時にそれを読み込むため、一般的にstyled-componentsよりも高速だと言われているのも特徴です。
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
Astroturfは、ランタイムレイヤーを追加せずに、既存のCSS処理パイプラインで、JavaScriptファイル内にCSSを記述することができます。
Astroturfでは、↓このようにスタイルをあてます。
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
Twinは、Tailwindのクラスを使用して、スタイルを指定し、サポートされている任意のCSS-in-JSライブラリにコンパイルできます。
またTwinでは、CSSオブジェクトに変換してからCSS-in-JSライブラリに渡しているため、クライアントバンドルの追加は不要なのも特徴です。
Twinでは、↓このようにスタイルをあてます。
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
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
vanilla-extractは、TypeScript のランタイムがないスタイルシートを作成するCSS in JSです。
ローカルスコープのクラス名とCS 変数を使用して TypeScriptでスタイルを記述し、ビルド時に静的 CSS ファイルを生成します。
vanilla-extractでは、↓このようにスタイルをあてます。
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,
});
import { themeClass, buttonStyle } from './styles.css.ts';
document.write(`
<section class="${themeClass}">
<button class="${buttonStyle}">ボタン</button>
</section>
`);
詳しくは、↓公式サイトをご覧ください。
まとめ
いかがだったでしょうか。
ぜひ今回紹介したCSS in JSを導入する時や新しく勉強する時などの参考にしていただき、
フロントエンドの開発体験を向上させていきましょう！
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。