Classless CSS の使いどころ

Classless CSS ってなに

Bulma や Bootstrap などの CSS Framework と似て非なる存在の「Classless CSS」は、その名の通り「クラスのない CSS」です。

なんのこっちゃ分からんという人は Classless CSS のひとつである MVP.css のページとソースコードを見てみてください。
https://andybrewer.github.io/mvp/

Bulma や Bootstrap などの CSS Framework では <div class="row justify-content-md-center"> などのように HTML タグの class に対して様々な定義を追加することで柔軟なデザインを実現しているわけですが、Classless CSS ではこの class に色々指定する、ということをせず HTML だけを記述することでレイアウトの体裁を整えるというアプローチをとっています。

そのため HTML は必然的にセマンティックでなければならず、結果として HTML だけ記述すればレイアウトの構成が出来るという点がメリットになります。

めっちゃいいじゃん

と思いますよね。私も実際そう思って、個人開発のプロダクトに導入してみることにしました。が、実際に使ってみると、当初の印象とはちょっと異なることがわかってきました。

ひとつの HTML タグに対してひとつのデザインしかない

これは MVP.css で <table> タグを使った場合のデザインなのですが、 Classless CSS にはクラスが無いため、実質ひとつの HTML タグに対してひとつのデザインというかたちになっています。

そのため、例えば連続して <table> が必要なんだけど、おんなじ色味ばっかりだと分かりづらい、などといったケースにめっぽう弱く、結果としてクラスに頼らざるをえないという状況が起こりがちになります。

グリッドじゃない

MVP.css の例だと <section><aside> で Card タイプのレイアウトを表現することができ、なおかつレスポンシブにもなっているため、一見するとグリッドっぽい表現なのかな？と思いがちになるのですが、CSS Framework におけるグリッドほどの柔軟性はありません。

最初からセクションごとに表示したいものが決まっているという場合はそれで問題ないのですが、一般的な動的 HTML のように要素数が可変だったりするものとはそこまで相性は良くなさそうです。

使いどころ

セマンティック HTML というところの意味で考えるのであれば、ランディングページとか、トップページとか、そういった 「ある程度表示されるものが限定されており、なおかつそれなりに軽くないといけない場所」 にはベストマッチと言えそうです。

また本来 HTML が持つ Markup という機能に最大限配慮したアプローチとも言えますので、HTML そのまま出すだけだと素っ気なさすぎてどうにも・・・と言った場面にも便利です。性質上、マニュアルや手順書などの記述に対してかなりフィットしますので、HTML でマニュアルとか書きたいんだけど CSS の手心はないし、かといって CSS Framework は大掛かりすぎるし・・・といった場面などに最適。特に気にしないのであれば、リセット CSS のように「最低限のレイアウトを行ううえでの素地（あるいはそのまま）」として使うのも良さそうです。

注意点としては、HTML が素っ気ないぶん、画像などを多めに使っていくということが考えられるため、結果的に重いページになってしまった、などといったケースも考えられます。適宜 SVG や WebP などを採用していくのが良いでしょう。

こういうやつとか、一見「おっ！かっこいい！」って思うんですが、まず間違いなくトップページとかでしか使わないんですよね。

CSS Framework の選択肢としてこういうものがひとつあってもいいのではないか、という記事でした。