CSS in JSについて知っておくべき全てのこと

最近忙しかったから久々の更新。今日はGoogle KeepにKeepしまくった数々の記事を消化しています。。。。

記事はCSS in JSについて。プライベートのプロジェクトで使ってるから改めて理解するため意訳する。一部関係なさ気なところは飛ばした。

hackernoon.com

All You Need To Know About CSS-in-JS

きっと君はCSS-inJSとかStyled ComponentsとかRadium, Aphroditeとかについて耳にして、「なんだこれ?」って思ってここにきたんだろう。

これからその疑問に答えて、CSS-in-JSのコンセプトとどんな技術なのかについて理解していこう。そして、CSS-in-JSは楽に使い始められる技術だってことも最初に伝えておく。何も特別な用語があったりするわけじゃいからね。

CSS-in-JSって何?

JSSはCSSよりもよりパワフルで抽象的なものだ。Javascriptでスタイルを表現することができて、メンテナスもできる。これはランタイムやサーバサイドでで処理されるCSSコンパイラでハイパフォーマンスを発揮する。しかもコアなライブラリはたった6KBしかないし、必要ならプラグインAPIを使って拡張することもできる。

インラインで書くスタイルとCSS-inJSは違うもの!

これがインラインで書いたもの。

inline_styled.js
const textStyles = {
  color: white,
  backgroundColor: black
}

<p style={textStyles}>inline style!</p>

そして、上のコードをブラウザで表示するとこういうHTMLが生成される。

<p style="color: white; backgrond-color: black;">inline style!</p>

一方でCSS-in-JSはというと。

import styled from 'styled-components';

const Text = styled.div`
  color: white,
  background: black
`

<Text>Hello CSS-in-JS</Text>

こういうコードになって、ブラウザで開くと以下のHTMLが確認できる。

<style>
.hash136s21 {
  background-color: black;
  color: white;
}
</style>

<p class="hash136s21">Hello CSS-in-JS</p>

この2つの違いについて

おわかりいただけただろうか。CSS-in-JSの方は<style>がDOMのトップに追加されている。一方でインラインのスタイルは単にDOM nodeのプロパティにstyleが追加されている。

だから何かって?

すべてのCSSの仕様をJavascriptイベントハンドラで利用できるわけじゃないんだ。多くのpesudoセレクタ(:disabled, :before, :nth-childとか)とか、<html><body>はサポートされていないんだ。

でもCSS-in-JSを使えば

CSSが持つ全ての力を発揮することができるんだ。実際のCSSが生成されたら、mediaクエリとかpseudoセレクタが使えるんだ。しかもいくつかのライブラリ(jssとかstyled-components)はほかにもいけてるCSSネイティブにはない機能をサポートしてるんだ。ネスティングとかね。

「じゃあそのまま、CSSCSSかけばよくない?」

そうだね。これまでずっとそうやられてきたしね。でも、モダンウェブの問題はページじゃなくてコンポーネントにスタイルを書くってことなんだ。

CSSはこれまで一度もコンポーネントを意識したアプローチをしてこなかった。それを解決するのがまさにCSS-in-JSなんだ。VueだってStyleからstateにアクセスすることはできないだろ?

CSS-in-JSの利点は?

コンポーネントごとに考えられる

もうバラバラのCSSに悩む必要なんてないんだよ。

JavascriptのエコシステムにCSSを組み込むことができる

真の分離

スコープセレクタは十分じゃない。CSSの持つプロパティは自動で親要素からの影響を受ける。だがjss-isolateを使えばもう一切プロパティを継承しないで表現できる。

スコープドセレクタ

CSSは一つのグローバルな名前空間しか持ってない。だからセレクタの衝突を避けながら命名する必要がある。BEMとかを使えば一つのプロジェクト内ならなんとかなると思う。けど、サードパーティのライブラリを使う時は困る。そんなとき、JSSはユニークなclass名をデフォルトで付与してくれるんだ。

コードシェアリング

CSS<=>JSのコードの共有が簡単にできる。

ユニットテストが書ける

CSSのためのね!

デメリット

学習曲線(訳者注:としか書いてない), 新たな依存が生まれる、新しいチームメートには優しくない(フロントエンド自体がはじめての人は更に学ぶことが増える) とまあ、利点のほうが欠点より多いのでCSS-in-JS やってみよう!失うものはなにもないんだから!

最も人気なCSS-in-JSライブラリ

Styled Component

import React, { Component } from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  color: white;
`;

const Wrapper = styled.div`
    background: black
`

class App extends Component {
  render() {
    return (
        <Wrapper>
            <Title>Hello World!</Title>
        </Wrapper>
    );
  }
}

export default App;

www.styled-components.com

その他 JSS

import React from 'react'
import injectSheet from 'react-jss'

const styles = {
    wrapper: {
        background: 'black'
    },
    title: {
        color: 'white'
    }
}


const App = ({classes}) => (
    <div className={classes.wrapper}>
        <h1 className={classes.title}>
            Hello JSS-React!
        </h1>
    </div>
)

export default injectSheet(styles)(App)

github.com

glamorous

import React from 'react'
import glamorous from 'glamorous'

const Wrapper = glamorous.div({
    backgroundColor: 'black'
})

const Title = glamorous.h1({
    color: 'white'
})

const App = () => (
    <Wrapper>
        <Title> Hello JSS-React!</Title>
    </Wrapper>
)

export default App;

glamorous - React component styling solved 💄

formidable.com

github.com

github.com

掲載したコード例は本当にシンプルなものに過ぎない。これらのライブラリはもっとたくさんの機能があるんだ。たとえば、theming, dynamic props, server side renderingとかとか。

引用ここまで