当社の3サイトのCSSフレームワークを変更した

　当社保有の3サイト（公式サイト、当ブログ、妻のブログ）のCSSフレームワークをPure CSSからMaterializeに移行しました。どれに移行するかの検討期間も含めると2ヶ月かかりましたが、レンダリング速度も上がり満足です。せっかくですから移行の経緯も含めて記録を残しておこうと思います。

移行した理由

　当社で利用していたPure CSSのバージョンは、2013年リリースのVer.0.2.1でした。それ自体悪いものではなかったのですが、CSS3が主流になっている今、ムダなコード（特に過剰なベンダープレフィックス）が多いと思っていました。コロナ禍で移動時間が減り、その移動時間分をフレームワークの変更に充てようと思って作業を進めることにしました。

検討したフレームワーク

　様々なネット上の評判を考慮して、PureCSS最新版、UIkit、Bulma、Foundation、Materialize、Bootstrapに絞り込みました。とはいえ、FoundationとBootstrapは検討するまでもなく却下し、残りの4つに絞り込みました。理由としては、当社サイトの場合ゼロから構築するわけでもなくJavaScriptを多用したダイナミックなWebサイトでもないので、その割にはJavaScriptまわりが多いかなと思い却下しました。ただ、ゼロから作るのであれば、Foundationは理想的とも感じたので、近日作成しようと思っている弊社のクライアント向けのサイトでは採用しようかと思っています。残りの4つについては実際にテストで搭載してみたのでそのときの感想も含めて記録しておきます。

PureCSS最新版

　バージョンが上がっただけなので基本的なデザインは変わりませんが、メディアクエリ（画面サイズごとにデザインを変更したい場合に利用する機能）が固定的で、Sassを使ってカスタマイズすることを前提としていないので、コードが重くなる気がしたので取りやめました。

UIKit

　デザインは、検討した4つの中で一番気に入りました。コミュニティも活発で非常に魅力的で一時はこちらを採用しようと思っていました。ただ、CSSの設計ポリシーが私と真逆だったので最終段階でとりやめました。具体的にいうと、私の場合、デスクトップ用にデザインをして、スマホ用に一部デザインを修正するという形でレスポンシブデザインを構成しています。ですがUIKitの場合は、小画面用をベースに大画面用にメディアクエリで部分設計する方が設計しやすいようにできています。私が考え方を変えればよいだけですが、いままでのCSSをマルッと変えないといけない手間も発生するのでやめました。また、用意されているコンポーネントが豊富なので、その分CSSやJSが重いのが気になりました。ですがこちらもFoundation同様、ゼロから設計するのであれば将来採用するかもしれないフレームワークです

Bulma

　もともと利用していたPureCSSと同じく、JavaScriptに依存しないCSSフレームワークなので、かなり好感度高くテストをしました。実際、Materializeと最後までどちらを採用するか悩みましたが、デフォルトのデザインがやや主張しすぎる点がちょっと違うかなと思い、僅差で取りやめました。ただし、フレームワークとしての使い勝手はMaterializeより上かなと思っていて、Materializeに移行する作業をしながら、「あぁBulmaにしておけばよかったかなぁ」と何回か思いました。

Materialize

　更新も止まっているようですし、テスト段階では採用はないかなぁと思いながら使っていました。ただ、いざテストしてみると機能が少なくシンプルな分、今まで自分がカスタマイズしてきたCSSやjQueryベースのプログラムと相性が良い。しかも、ドキュメントがシンプルなので理解しやすかったです。最後までBulmaと迷いましたし、こちらで行くと決めた後も「あぁ…」と思ったことは何回かありましたが、結果的には自由度が高くて満足しています。特に満足した点は、次の3つです。

• メディアクエリの扱いがデスクタップありきな私のやり方に合っている
• デザインがシンプル
• 必要最小限のデザインコンポーネントに限られている分、ファイルが軽量

それなりに経験がある人向きのフレームワークだとは思います。が、逆に言えば、邪魔するものが少ないので、カスタマイズしやすいという側面もあります。

採用してみて

　結果的にはMaterializeで良かったと思います。コミュニティが活発でないのでその点の不安はあります。ただし、HTMLの基本はこれから大きな進化はないと思いますし、7年前に比べればブラウザごとに表示にズレが出ることも軽減されてきました。よって、こちらで良かったのだろうと思っています。実際にGTMetrixでのレポートもCからAになりました。当サイトもPureCSSで設計した2013年当初はAだったんですが、色々と付け加えたり外部環境が変わっていくうちに色々とレポートで文句がでてくるようになりCにまで落ちていました。

　そうそうマメに切り替えるものではありませんから、Materializeと少なくとも5年は付き合っていこうと思っています。