CSSフレームワークから、JavaScriptに依存せず、軽量で、たくさんのコンポーネントをサポートしている1つを選ぶ

のみログでは、spectre.cssというCSSフレームワークを使っています。 どのCSSフレームワークを採用するかについては、本当に悩みました。 最終的に選定のクライテリアとしたのは以下の点です。

• 今後、ReactやVue.jsを使うことも考えて、JavaScriptやjQueryに依存しないこと。
• フレームワークのコードサイズは100KB以下。できれば50KB以下を目指す。
• できるだけ多くのコンポーネントをサポートしていること。
• selectのUIがOSネイティブではないこと。OSネイティブのselectはものすごく格好わるい。

このように選定のクライテリアを決めてみると、ものすごくコードサイズが大きなプロジェクトがあることがわかります。 例えば、以下のプロジェクトはminify後のコードでも200KBを超えます。

• Bootstrap
• Bootstrap Material Design
• Foundation
• Ink
• Material
• Materialize
• Schema
• Semantic UI
• tailwindcss
• Uikit
• WebUI

これらのフレームワークを除いた結果、残った選択肢の中で、十分なコンポーネントがサポートされていたのがMustard UIとspectre.cssでした。 コンポーネントは少ないですが、mini.css、Picnic CSS、turretcssあたりもいいです。あとは好みで選べばいいと思います。

個人的な意見として、Alerts/Toasts、Breadcrumbs、Card、Modal、Nav、Pagination、Tabあたりはサポートしてほしいです。

Bootstrapはspectre.cssと比べると、記述するコード量が多く、クラスも冗長な印象を持っています。
spectre.cssはたくさんのコンポーネントがサポートされていて、記述するコード量も少ないので、本当に気に入っています。