私はCSSが苦手で、これまでBootstrapやBulmaに頼ってきました。最近、CSS (SASS)を書く機会がたくさんあり、自分でCSSを書いても思い通りのレイアウトにできるようになりました。

そこで、このブログからBulmaを取り除いてみました。

Bulmaを取り除くメリット

CSSの総量が減り、ブログを表示するのにブラウザが読み込むデータが減ること。それによりブログが表示されるのにかかる時間が短縮されます。

このブログの場合、BulmaをCDNから読み込ませていませんでした。これはGoogle Page Speedのアドバイスに従って、CSSをHTML中に埋め込んでいたからです。

CDNを使っていれば、キャッシュされることを考慮し、Bulmaを使ったほうが、ブログを表示する時にインターネット経由で読み込むデータ量は減ったと言えたかもしれません。

もともとBulmaのサブセットを使っていたのですが、このブログのトップページのHTMLは118.18kBありました。これが今では44.14kBになっています。およそ63%削減されています。Bulmaを取り除く前後でレイアウトの変更もしているので、これはBulma以外の影響を少し含んでいます。

デメリット

自分で定義しないといけないCSSの量が増えることです。

配色やマージンの開け方も、BulmaやBootstrapのようなフレームワークではしっかりと考慮されていることでしょう。

私はCSSで思い通りにレイアウトできるようになったとはいえ、読む人に優しいレイアウトを思い描けているかは別の問題です。