かっこいいクラスレス CSS フレームワーク Bahunya (バウヒニア)

こんにちは日野澤です。

バウヒニア (bahunya) というクラスレスの CSS フレームワークを紹介します。

クラスレス

バウヒニアはクラスレスの CSS フレームワークです。クラスレスとはどういう意味でしょうか? クラスレスとは、つまり html の class 属性を一切使わないということです。バウヒニアのスタイルは全て html の生タグに対して設定されています。

例えば次のような生タグの table を書いたとします。

<table>
  <tr>
    <th>Game</th>
    <th>Year Developed</th>
    <th>Awesomeness</th>
  </tr>
  <tr>
    <td>Insurgency</td> 
    <td>2014</td>
    <td>87/100</td>
  </tr>
  <tr>
    <td>Absolute Drift</td>
    <td>2015</td> 
    <td>91/100</td>
  </tr>
  <tr>
    <td>Street Fighter III</td>
    <td>1997</td> 
    <td>89/100</td>
  </tr>
</table>

これはバウヒニアでは次のようにレンダリングされます

なんとなくいい感じですね (少なくとも、ブラウザのデフォルトスタイルよりはかなりかっこいいですよね!)

なんのためのもの?

バウヒニアはプロダクション環境で使うものではありません。生タグにアクセントの強いスタイルが当たっているので、これは明らかにアンチパターンです。ここからスタイルを拡張していくというものではありません。

では、どこでバウヒニアを使えるのでしょうか? 個人的には結構使い所はあると思っています。それは開発環境とか、プロトタイプとか、製品として出ないところです。例えば、開発環境でちょっとしたポータルサイト (機能はただのリンク集程度) が一瞬で欲しいというような場合です。開発用サイトとはいえ、HTML のデフォルトスタイルはちょっと厳しい。とはいえ、真面目に css を書くのは時間の無駄。きちんとした CSS フレームワーク (bootstrap, bulma など) を持ってくるのも結構面倒くさいです。そんな時にバウヒニアをスッと持ってきて、生タグの html だけで画面を書いていくと、なんとなくいい感じのページが安いコストで出来上がります ✨

ぜひ、バウヒニアを使って、普段スタイルに時間をかけられないページをかっこ良くしちゃいましょう!

名前について

バウヒニアという名前は、公式サイト の画像にある花の名前です。香港の区旗 に載っている花でもあります。

関連

バウヒニアに似たクラスレスフレームワークで tacit というものもあります。こちらは白背景でもう少し癖が少ないです。

参考: https://qiita.com/kt3k/items/8a5797d953bb3f8737f5