概要
今年に入ってからのんびりTwitterClient(https://github.com/bokuweb/tsukiakari)を作っていて、こいつに使いたいなーと思いコンポーネントセット作った。といっても、まだかなり雑でまだまだやることがありそう。
以下のような記事もあって様々なReactコンポーネントセットがあるんだが、あまり気にいるものがなく作ってみることにした。有名ところはMateri-UI
あたりになるんだろうけど、正直自分はMaterialデザインの色とか見た目があまり好きじゃないし、Material-UIの挙動が?(現在は改善されてるかも)だったり、Styleのみを閉じたシンプルなものが欲しいというのも理由のひとつになっている。
Bulma
Bulma
はFlexbox
ベースのモダンCSSフレームワークで現在V0.1.0RC。どんな感じなのかは以下の公式を眺めるとよい。先日もGithub Trendに入っていたので注目度は高いっぽい。
紹介記事もいっぱいでてくるし、以前作った(http://bokuweb.github.io/slack-list-ja/)でも試しに使っている。
作ったもの
作ったものは以下。
コンポーネントは以下から確認できます。サンプルコードは直接編集できるので、適当にいじってみてください。
一例を載せると以下のような感じ。
気をつけた点など
グローバルスコープを汚染しないこと
自分はもともとこういったCSSフレームワークが好きじゃなくて、大きな理由のひとつにグローバルスコープの汚染が上げられと思う。
これはどのCSSフレームワークも大きな差はないと思うけど、例えばBulma
の場合も以下のような記述があって、コンポーネント外にもスタイルは染みだしてしまう。
body { color: #69707a; font-size: 1rem; font-weight: 400; line-height: 1.428571428571429; } a { color: #1fc8db; cursor: pointer; text-decoration: none; -webkit-transition: none 86ms ease-out; transition: none 86ms ease-out; } a:hover { color: #222324; }
なので、今回はこういったグローバルなスタイルを削除し、コンポーネントに閉じつつ見た目を保っている(つもり。だけど、やはり多少の差異は避けられないような気もしている。例えばfont-size: inherit
が設定されたコンポーネントなどは、グローバルにfont-size
を指定していないのでBulma
の見本とくらべて大きくなっていると思う。)。これで、コンポーネントのスタイルがコンポーネント外のスタイルに影響を与えることはひとまず、無くなっていると思う。
擬似スコープ
csjs
擬似スコープを作成するのには、今回はcsjs
を使ってみることにした。こういったことを行うツールで有名所はCSS Modules
なんだろうけど、自分が食わず嫌いの天邪鬼で(CSS Modulesを使った際に外部にコンポーネントとして提供する手順がぱっと見よくわからなかったのもあるが)今回はcsjs
を使った。
csjs
はテンプレートストリングを使って以下のように使用する。
const styles = csjs` .title { font-size: 15px; } `; class Foo extends Component { render() { return ( <h1 className={styles.title}>Bar</h1> ); } }
すると実際には以下のようにclassName
にsuffix
が付加され擬似スコープ化されるというもの。あとはcsjs
を経由して得られるcss
を何らかの方法でinjectする必要がある。(後述するが今回はsubstack/insert-css
で