今年に入ってからのんびりTwitterClient(https://github.com/bokuweb/tsukiakari)を作っていて、こいつに使いたいなーと思いコンポーネントセット作った。いっても、まだかなり雑でまだまだやることがありそう。以下のような記事もあって様々なReactコンポーネントセットがあるんだが、あまり気にいるものがなく作ってみることにした。有名ところはMateri-UIあたりになるんだろうけど、正直自分はMaterialデザインの色とか見た目があまり好きじゃないし、Material-UIの挙動が?(現在は改善されてるかも)だったり、Styleのみを閉じたシンプルなものが欲しいというのも理由のひとつになっている。qiita.comBulmaBulmaはFlexboxベースのモダンCSSフレームワークで現在V0.1.0RC。どんな感じなのかは以下の公式を眺めるとよい。Trendに入っていたので注目度は高いっぽい。bulma.io紹介記事もいっぱいでてくるし、以前作った(http://bokuweb.github.io/slack-list-ja/)でも試しに使っている。coliss.com作ったもの作ったものは以下。github.comコンポーネントは以下から確認できます。サンプルコードは直接編集できるので、適当にいじってみてください。styleguide一例を載せると以下のような感じ。気をつけた点などグローバルスコープを汚染しないこと自分はもともとこういったCSSフレームワークが好きじゃなくて、大きな理由のひとつにグローバルスコープの汚染が上げられと思う。これはどのCSSフレームワークも大きな差はないと思うけど、例えばBulmaの場合も以下のような記述があって、コンポーネント外にもスタイルは染みだしてしまう。#222324;}なので、今回はこういったグローバルなスタイルを削除し、コンポーネントに閉じつつ見た目を保っている(つもり。多少の差異は避けられないような気もしている。inheritが設定されたコンポーネントなどは、グローバルにfont-sizeを指定していないのでBulmaの見本とくらべて大きくなっていると思う。これで、コンポーネントのスタイルがコンポーネント外のスタイルに影響を与えることはひとまず、無くなっていると思う。擬似スコープcsjs擬似スコープを作成するのには、今回はcsjsを使ってみることにした。Modulesを使った際に外部にコンポーネントとして提供する手順がぱっと見よくわからなかったのもあるが)今回はcsjsを使った。github.comcsjsはテンプレートストリングを使って以下のように使用する。}}すると実際には以下のようにclassNameにsuffixが付加され擬似スコープ化されるというもの。あとはcsjsを経由して得られるcssを何らかの方法でinjectする必要がある。(後述するが今回はsubstack/insert-cssで内の放り込んでいる。上記のようにcsjsでランダムなsuffixをつけて、スタイルを上書きしたい場合は上位からclassNameを渡して設定させようとしていたんだけど、これだと詳細度の関係で思うようにスタイルの上書きができなかったり、入れ子になっているコンポーネントまでclassNameが渡せず、細かいカスタマイズができない、という話しがあって結局現在はcsjsを介して固定(___re-bulma_)のPrefixをつけるようにした。擬似スコープを作るという意味ではこのへんでも十分かもしれない。/>にcssを仕込むの嫌いで、上でも少し触れたようにsubstack/insert-cssでhead内に放り込んでいる。それだけのためにinsert-cssに依存してruntimeで挿入するのか?お前のトレードオフは間違っている。/>にしこむことについてどんな印象を持っているんだろうか。現在スタイル関係のファイルで百数十KBあって、それにコンポーネント(各数KB)あるのでかなりきつい。そもそもこうやって作ってもたものの本当に使うのコンポーネントって、ほんの一部でほとんどが無駄だと思う(Progressとか出番がイメージできない)。課題としてlodashのようにコンポーネントの単位でインストールできるようにすれば今後使いやすいかもしれないと思ったりもしている。ようにインストールするイメージ。/>程度の粒度で公開されていれば、使用できるケースも増えるかもしれない。CSSのリファクタリング今はcsjsの制約があって、本家のcssからグローバルな定義を解決しつつ機械的に移植したためcssで書いていて、散らかっているんだけど、リファクタリングしながらstylusで書いてもいいかもと思っている。名前は素直にreact-bulmaとかでいいかとおもったけど、こういったものをみんな作ろうと思うのか何なのかわからないけどreact-bulma、bulma-reactも抑えられていて、re-bulmaにした。先に名前だけ抑えて何も作らないのは勘弁して欲しい。その過程でyamchaというのも発見した。github.comさいごにスローペースかもしれないけど、ぼちぼち改善していくのでよければ試してみてください。モックみたいなのを作るケースには役だつかも。(1)月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。