Brevis

Brevisは高パフォーマンス且つ拡張性の高いWebアプリの為に設計されたCSSツールキットです。セレクタファーストでレスポンシブWebデザイン対応、論理的な命名規則が特徴だそう。各classは1つの仕事だけを行うため、期待通りの動作をしてくれて、超高速で無断が無い点から他のテクノロジーと相性が良いそうです。

!importantを持たず、何にも依存していない、との事。GithubからダウンロードしてWebサイトで読み込むだけで、クラスも直感で理解できるシンプルな設計なので学習コスト不要で導入できます。

雑感

個人的にも知りませんでしたが、よく使われるCSSフレームワーク例えば、BulmaやBootstrap、Materializeなどは多くの!importantが使われているそうですが、Brevisでは!importantは悪ではないけど最終的な手段にすべきであって、フレームワークに本来あるべきものではなく、開発者の判断で使われるべきものだ、という考えで!importantがゼロである事を特徴としています。

設計はユーティリティファーストとなっており、例えばポジションユーティリティの1つであるtopだけでも非常にきめ細かく書かれています。

.t--0 { top: 0 }
.t--1 { top: 8px }
.t--2 { top: 16px }
.t--3 { top: 24px }
.t--4 { top: 32px }
.t--5 { top: 40px }
.t--6 { top: 48px }
.t--7 { top: 56px }
.t--8 { top: 64px }
.t--50p { top: 50% }
.t--100p { top: 100% }
.t--n1 { top: -8px }
.t--n2 { top: -16px }
.t--n3 { top: -24px }
.t--n4 { top: -32px }
.t--n5 { top: -40px }
.t--n6 { top: -48px }
.t--n7 { top: -56px }
.t--n8 { top: -64px }

class命名規則はabsoluteならabs、backgroundならbg、borderならbrdrといったように略称が用いられており、基本的にそれぞれ8パターン用意されています。一見とっつきにくいようですが、クラス名を覚える必要はなく、単純に省略ルールを覚えるだけで済む、という考えの元で設計しているみたいです。

僕自身、自分で昔から自作したフレームワークを使っているんですが、命名規則は本ツールキットと概ね同じ考えです。大きなプロジェクトでなく、自分用で使うものなので自分が分かればいいルールで書いていますが、同じように「ルールさ覚えれば忘れない」と考えて作っていたので設計思考は共感出来ました。ただ、自分用よりも細かく上手に設計されていたので参考にしたいと思います。BrevisのライセンスはMITとなっています。

Brevis