CSSフレームワーク選びのポイント20190925 / uniq
View Slide
The State of CSS 2019(2019年のCSS使用状況) https://2019.stateofcss.com/知っている 興味ある 満足している
知っている• 1位:Bootstrap• 2位:foundation• 3位:Materialize css• 4位:Semantic UI• 5位:Bulma興味ある• 1位:Tailwind• 2位:Semantic UI• 3位:Pure CSS• 4位:Bulma• 5位:Ant Design満足している• 1位:Tailwind• 2位:Bulma• 3位:Pure CSS• 4位:Tachyons• 5位:Semantic UI
ユーティリティ系 UIパーツ系Tailwind BootstrapBulmaTachyonsPure CSSSemantic UIデザイン仕上がってるねデザインあっさり
ユーティリティ系 UIパーツ系Tailwind BootstrapBulmaTachyonsPure CSSSemantic UIデザイン仕上がってるねデザインあっさりbuttonの見た目を作りたい↓class=“button”buttonの見た目を作りたい↓class=“p-3 border border-blue bg-blue text-white”
ユーティリティ系 UIパーツ系Tailwind BootstrapBulmaTachyonsPure CSSSemantic UIデザイン仕上がってるねデザインあっさりCSS詳しくなくても、なんとなく作れるCSSの知識が必要!!!
UIパーツ系 & デザイン仕上がってるBootstrap BulmaBootstrapBulmaすでに、primary,info,success…といったフォーマットが決まっている(変更することは可能だけど、面倒くさそう〜)
Bootstrap BulmaUIパーツ系 & デザイン仕上がってる• デザインを考えるのが面倒な時• デザイナーがいない/デザイン仕様がないんだけど、いい感じに作らないといけない時。• 管理画面みたいなのを作る時• デザインパターンが少ない。遊びココロなし。• 工数がない!• 急ぎで作らないといけない!
• jQuery 使ってる• JS知らなくてもかっちょいいメニューとか作れる• 認知度が高いのでノウハウ情報が豊富• UI がたくさんある• ルールが多い。• 大小については基本スタイルがある。 色については基本スタイルはないので必ずclass指定しないといけない。• 例)class=“btn”→ただの文字。ボタンっぽくない見た目。• 例)class=“btn btn-primary”• 例)class=“btn btn-primary btn-lg”Bootstrap Bulma• JavaScript 使ってない• Vue.jsとセットでも安心して使えそうだが、そのままだとBSよりもできることが少ない• Font Awesome(font icon)対応• ルールが少ない。• 基本styleがあって、そこに「has-」「is-」class を付けて切り替える• 例)class=“button”→ボタンの見た目になってくれる。• 例)class=“button is-primary”• 例)class=“button is-large”
UIパーツ系 & デザインあっさり色がない!灰色塗りつぶしと黒ラインだけ!Pure CSSSemantic UIPure CSSSemantic UI自分で色設定したり、色の意味を持たせた変数を作れる。色の設定がないので、色の設定を考えないといけない…!その色の意味も考えないといけない…!
UIパーツ系 & デザインあっさりPure CSSSemantic UI• デザイン仕様がある時• デザイナーがいる/デザイン仕様があり、それにあわせてデザインをあてないといけない。• 管理画面ではない、あれこれなサービスを作る時• そのまま使うとだいぶシンプル/文字が小さいので、お年寄りには厳しいUIになりそう。
• githubでたくさんスターをもらってるらしい• いちいちclass名に「ui」ってつける• UI パターンが多い• bootstrapまでこってり設定されてなくてもいいから、最低限のUIが色指定しやすい形で用意されてて欲しい人向け。• Yahoo で作られたらしい• いちいちclass名に「pure-」ってつける• UIがほんとうにシンプルなものしかない• cssをゼロから書くのが好きな人向け。Semantic UI Pure CSS
ユーティリティ系Tailwind Tachyons他フレームワーク/フレームワーク未使用に比べると…• classの効果について調べなくてもいい。• htmlを見るだけで、 どんなstyleが当たってるのか分かる。• Class名を考えなくてもいい。• レスポンシブが楽〜。• CSSを普通に書いたら良いのでは?• htmlが長くなって読みにくい。class名 1つ= style1個
ユーティリティ系Tailwind Tachyons• デザイン仕様がある時• デザイナーがいる/デザイン仕様があり、それにあわせてデザインをあてないといけない。• 素のCSS普通に書ける。• css苦手なメンバーがいると難易度高めかも。
• Style豊富• @applyなどでCSS内からclassを呼び出せる• 色変数・サイズ変数を用意しやすい• 色変数やサイズ変数をたくさん設定してしまうと、すべて書き出されて、CSSファイルがでかくなる• (使われてないものは書き出さないようにする策は別途用意されているが、これを使うと開発しにくさがあったりもする)• Styleが少ないかも• 軽量!Tailwind Tachyons
CSSフレームワーク選びのポイントまとめ• 正解はひとつじゃない〜。• どんなプロジェクトか?・どんなメンバーか?・工数はどのくらい?を見ながら決めるといいと思う。
そういえば自己紹介• ID: uniq• 石崎うに(うにさんと呼ばれてます)• 埼玉県でワンコと暮らしています• デザイナーです• デザイナー友達を募集中!