CSSに死を！これはJSerの叫び！

自己紹介

• @kyo_ago
• ChatWorkの中の人です
• 業務でLocalProxyを作りました
• 今回はそのLocalProxyのUI作った時の話です

CSSに死を！これはJSerの叫び！

問題は2つ

1つ目

CSSの問題

CSSの問題

• セレクター設計が辛い
• 特に大規模化する場合、「CSSの問題」===「セレクターの問題」と言っていい
  （それ以外にもあるけど、大規模化するとほぼ確実にセレクターは問題になる）
• なぜ大規模化するとセレクターが辛くなるのか
• 「隠蔽ができない」
• サイト全体で使用しているグローバル変数に対する定義を書いているようなもの

2つ目

プログラマの問題

プログラマの問題

• CSSが辛い
• 「CSSは独自の設計技術が必要」===「これまで培ってきたプログラムの設計技術が流用できない」
  （OOCSSとかあるけど、基本的に概念を流用するにはCSS流の解釈が必要）
• 継承、移譲、カプセル化、関数化等をCSS流に再構築するのか？
  （もちろん不要な概念もあるけど、どの概念が必要か、不要か検討し直すの？）
• JSなら簡単に実装できることをCSSの最新仕様として実装するのか？
  （@documentとか）

辛い

ReactStyle

ReactStyle

• JS内にStyleを埋め込む
• StyleをObjectとして管理できる
• StyleはTemplate stringsで直接記述可能
  （keyをcamel caseにしたり、クオート足したりしなくてい）
• 要素とStyleObjectをひも付けて自動的にclass名を生成
  （一括でstyle要素に書き出したりできる）
• StyleをObjectとして扱えるので各種プログラミングの概念を流用しやすい
  （Styleだけ独立したClassTreeを作ってmixinしたりとか）

例

var HelloWorld = React.createClass({
  render() {
    var styles = ReactStyle`
      color: red;
      background-color: white;
    `;
    return <div styles={styles}>Hello, world!</div>
  }
});

実際どうか

やってみた

やってみた

• chatwork/chrome_extension_plumber
• 割と普通にかける
• セレクタをほとんど考えなかった
• Styleをつけるためだけにclass名とか考えなくてよくなる
• Styleの書式は一緒なので「DevToolsでいじってコピペ」は普通にできる

問題点

擬似要素、擬似クラス全滅

擬似要素、擬似クラス全滅

• :hoverしたい？

擬似要素、擬似クラス全滅

• :hoverしたい？onmouseenter, onmousereaveでどうぞ

擬似要素、擬似クラス全滅

• :hoverしたい？onmouseenter, onmousereaveでどうぞ
• :activeしたい？

擬似要素、擬似クラス全滅

• :hoverしたい？onmouseenter, onmousereaveでどうぞ
• :activeしたい？onclickでどうぞ

擬似要素、擬似クラス全滅

• :hoverしたい？onmouseenter, onmousereaveでどうぞ
• :activeしたい？onclickでどうぞ
• :before, :afterほしい？

擬似要素、擬似クラス全滅

• :hoverしたい？onmouseenter, onmousereaveでどうぞ
• :activeしたい？onclickでどうぞ
• :before, :afterほしい？要素足しましょう

擬似要素、擬似クラス全滅

• :hoverしたい？onmouseenter, onmousereaveでどうぞ
• :activeしたい？onclickでどうぞ
• :before, :afterほしい？要素足しましょう
• div *とかしたい？

擬似要素、擬似クラス全滅

• :hoverしたい？onmouseenter, onmousereaveでどうぞ
• :activeしたい？onclickでどうぞ
• :before, :afterほしい？要素足しましょう
• div *とかしたい？全部の要素に足しましょう

擬似要素、擬似クラス全滅

• :hoverしたい？onmouseenter, onmousereaveでどうぞ
• :activeしたい？onclickでどうぞ
• :before, :afterほしい？要素足しましょう
• div *とかしたい？全部の要素に足しましょう
• 継承とか考えるとmergin-*系とかを展開する必要あるかも

だめ！おおちゃく

だめ！おおちゃく

実際超面倒だったけど

「使えなくない？」

ReactStyleはまだ本気出してない

本気

• ReactStyleがReactのバージョンアップについて行けてない
• 0.4系が公開されれば改善されるはず
• もうちょっと頑張ればRiot的にも書けそう

Riotとくらべてどうか

Riotとくらべて

• Styleだけで言えばRiotの方が書きやすそう
• style[scoped]ほしいですね
• Riot式はClass treeつくれなさそうなのが残念
• 個人的にはJSの中にhtmlとかstyle書きたい派なのでReactStyle支持
  （その点でWebComponentsもちょっと。。。）

最後に

CSSに死を！とは

CSSに死を！

• .cssファイルに死を
• Cascading Style Sheets自体は付き合っていかざるをえない
• ただ、CSSがJSと結合することで不要になる部分も多い
• もともと静的なcssが動的な変化に対応していた部分は不要になる
• どんなAltCSSが出ても.cssを出力する以上最終的には静的な状態に落としこむ必要がある
• 動的な状態「も」記述できるならそれに越したことはないはず
• JSと結合した新しいAltCSSも考えられるのでは

ご清聴ありがとうございました

ChatWorkではエンジニアを募集しています！