This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 5 years have passed since last update.

CSS講義第6回

Last updated at 2017-10-05Posted at 2017-09-29

1 / 9

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

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をスケール（大規模化）するときの問題点

グローバルネームスペース

CSSでは全てはグローバルな空間なので、命名規則などで頑張る

依存性

Componentとの依存関係を管理するのが難しい

デッドコードの削除

使われていないコードの検出が難しい

縮小

クラス名の縮小が難しい

定数の共有

CSSとJS側で変数の共有が難しい

非決定論的な解決

詳細度が同じ場合、後に書かれた方が優先されるため、詳細度を調整する必要がある

分離

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

お疲れ様でした！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

CSS講義 第6回