はじめに

多くの開発者がデザイン経験がないと思いますが、自分もそのうちの一人です。このブログも何度も何度も試行錯誤して今の形になりました。正直もっとおしゃれにしたいし、まだまだこれからもUIは改善するつもりでいます。

そういったノンデザイナーズの強い味方であるCSSフレームワークの中の一つ、「Bulma」について今日は自分なりの考えを書いていこうと思います。

Bulmaを導入した理由

Reason1. Javascriptがない

React/Vue/Angularのどれかを使うみたいな風潮がありますが、結局Bulmaは「no javascript」なのでどれとも相性が良い。（というより喧嘩しない。だって「no javascript」だから。）

Reason2. ドキュメントが見やすい

どういうHTML構造でどういうクラス名を付与すれば結果どうなるかがわかりやすかったです。正直言えば日本語ドキュメントも欲しいところですがそれは我慢。

Reason3. デザインがくどくない

デザインがくどいフレームワークありますよね。「あっ、これ○○使ってるねー」とかよく聞きますよね。カスタマイズすれば良いという話ですが、センスの良いカスタマイズなんて出来ないし、出来ればそのまま使いたい。そうなった際にあまりデザインがくどくなくて、気になったところをほんのちょっと自分で味付けするだけが理想。

Reason4. 軽量（だと思っていた）

「軽いほうが良いよな」と安直な気持ちで、「【2019年最新版】軽量なおすすめCSSのフレームワーク8選」みたいなタイトルのよくありがちなサイトをちらほら見ていると、軒並み名を連ねているBulma。これは軽量で間違いないなと勝手に思い込んでいましたが、よくよく調べてみるとBootstrapの「bootstrap.min.css」が152KB、一方でBulmaの「bulma.min.css」が186KBと、全くもって軽量じゃないことが判明しました。ちなみに軽量で有名なSkeletonの「skeleton.min.css」が16.9KBと噂に違わぬ実力を見せました。とは言え、ファイル容量よりも大事なのが動作パフォーマンスなので、きっとBulmaは動作パフォーマンスが軽いのだろうと何の根拠もなく納得することにしました。

Reason5. クラス名が単純明快

クラス名の先頭にis-やhas-が付いていたり、セクションなら.section、タイトルなら.titleと実に単純明快。これなら学習コストも低く、導入しやすいなと感じました。が、これが後にBulmaを外す最大の要因になります。その理由は以下↓

Bulmaを外したたったひとつの理由

クラス名が単純明快なのにスコープはグローバル

上でも書いているように、Bulmaのクラス名は本当に明快です。タイトルは.titleです。これはこれで良いんです。むしろ好きです。ただ、

なぜグローバルスコープなんですか？

先ほど出た「Bootstrap」や「Skeleton」はと言うと、どちらもOOCSSを採用しているためスコープ自体はグローバルですが、他のCSSとの競合は起きにくくなっています。

例えばBootstrapで言うとこんな感じ

<div class="card">
  <div class="card-body">
    <h5 class="card-title"></h5>
  </div>
</div>

.card-title自体はグローバルに宣言されていますが、.card内のスタイルだと一目瞭然なので全く違うコンポーネントの中で.card-titleを使わない限り事故にはなりませんし、他のライブラリを導入してもクラス名が重複する可能性も割と低めです。

一方でBulmaはと言うとこんな感じ

<section class="section">
    <div class="container">
        <h1 class="title"></h1>
    </div>
</section>

この場合、.titleのスタイルはグローバルに宣言されているため、他のライブラリで.titleが使われていたり、自分でどこかのコンポーネントで.titleを使っていたりするとそこのスタイルと競合してしまいます。RSCSSのようにスタイルを定義するときに.section > .container > .titleで定義してくれていればHTML構造が同じでない限り競合しないから良いんです。でも.titleみたいなどこにでも使われるようなクラス名をグローバルに宣言してしまうと事故ってしまうんです。現にこのブログで使われているソースコードのシンタックスハイライター「Prism.js」の.numberというクラスが競合し、ソースコードのレイアウトが崩れてしまいました。この問題についてGitHub上で軽い論争が起こり、開発者は接頭辞の検討も行いましたが、最終的には何も対応は成されずに今に至ります。詳しくはこちら。

正直この問題は解決しようと思えば出来ます。.bulmaの中でBulmaのcssをインポートしたり、他にもGitHub上ではこうすれば良いよみたいな意見もたくさん出ています。が、GitHubのissueを見ていて開発者の方の対応を見ていると、なんだかBulmaを使いたくなくなったのが正直なところです。そのため、ひっそりとyarn remove @nuxtjs/bulmaをしました。

Bulmaを外したことによる弊害

yarn remove @nuxtjs/bulmaをした後レイアウトが崩れました。驚いたのがBulmaを使っているつもりではなかった多くの箇所でレイアウトが崩れたのが、Bulmaのグローバルスコープトラップの影響範囲の広さを物語っていました。

さいごに

現在はBootStrapVueを採用しすべて順調に機能しています。Bulmaは人気だし流行ってるし、正直もっと使いたかったので残念ですが、今回のこれは大変勉強になりました。今後CSSフレームワークを選定する際は、グローバルスコープにどのぐらい宣言しているかも大きな選定基準になりそうです。