CSS講義第6回 #CSS

今日覚えていって欲しいこと

CSS in JS
CSS Modules
styled-components

CSS in JS

2014年11月、Reactの開発者 Christopher Chedeau 氏「React: CSS in JS」
CSSをスケールするときの問題点を解決するため生まれた
CSSをJSのオブジェクトとして定義し、Component側からimportする
- コンポーネント単位でローカルスコープになる
インラインスタイルを使うことで、詳細度が一定になる
CSS in JS を実現するためのツールとして React Style、jsxstyle などがある。一覧はこちら。

/* Thumbnail.css.js */
export default {
  image: {
    borderRadius: '3px'
  }
}

/* Thumbnail.jsx */
import styles from './Thumbnail.css.js';
render() { return (<img style={styles.image}/>) }

/* Rendered DOM */
<img style="border-radius: 3px;"/>

ReactでCSSをスケール（大規模化）するときの問題点
1. グローバルネームスペース
- CSSでは全てはグローバルな空間なので、命名規則などで頑張る
2. 依存性
- Componentとの依存関係を管理するのが難しい
3. デッドコードの削除
- 使われていないコードの検出が難しい
4. 縮小
- クラス名の縮小が難しい
5. 定数の共有
- CSSとJS側で変数の共有が難しい
6. 非決定論的な解決
- 詳細度が同じ場合、後に書かれた方が優先されるため、詳細度を調整する必要がある
7. 分離

CSS in JS の問題点

インラインに展開するため、インラインスタイルの制約を受ける

擬似クラスが使えない
メディアクエリが使えないなど

CSS Modules

2015年、CSS Modulesチームによって開発された（CSS ModulesチームのメンバーはReactユーザー）
全てのクラス名とアニメーション名がデフォルトでローカルにスコープされたCSSファイルである
CSSファイルをJSにimportする
スタイル定義はCSSで書くことができるため、インラインスタイルの制約をうけない

/* Thumbnail.css */
.image {
  border-radius: 3px;
}

/* Thumbnail.jsx */
import styles from './Thumbnail.css';
render() { return (<img className={styles.image}/>) }

/* Rendered DOM */
<img class="Thumbnail__image___1DA66"/>

/* Processed Thumbnail.css */
.Thumbnail__image___1DA66 {
  border-radius: 3px;
}

http://plnkr.co/edit/FbcJpb?p=preview

styled-components

Reactコンポーネントとスタイルをまとめて書くことを目的とした新たなライブラリー
CSS Modulesの作者であるGlenn Maddern氏と、React boilerplateの作者であるMax Stoiber氏によって作られた
npmやyarnでインストール
実際のCSSが書ける
CSSとDOMのマッピング(=className)が無くなる

styled-componentsで作るButtonコンポーネントの例

import React from 'react';
import { render } from 'react-dom';
import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>,
  document.querySelector('#app')
);

出力結果

<head>
<style type="text/css">
　　.sc-bdVaJa {}.eAbwyT {background: white;color: palevioletred;font-size: 1em;margin: 1em;padding: 0.25em 1em;border: 2px solid palevioletred;border-radius: 3px;}.dfjAq {background: palevioletred;color: white;font-size: 1em;margin: 1em;padding: 0.25em 1em;border: 2px solid palevioletred;border-radius: 3px;}
</style>
</head>

<!--　略 -->

<button class="sc-bdVaJa eAbwyT">Normal</button>
<button class="sc-bdVaJa dfjAq">Primary</button>

参考資料

これにて

CSSの講義は終了です。
やはり実践に勝る勉強はありませんので、お互い悩みながらもいっぱい書いていきましょう。
見た量・考えた量・手を動かした量の総和が自分の力になると思います。

CSS講義 第6回

今日覚えていって欲しいこと

CSS in JS

CSS in JS の問題点

CSS Modules

styled-components

styled-componentsで作るButtonコンポーネントの例

参考資料

これにて

お疲れ様でした！

CSS講義第6回