bascssとHTMLでstyleを設計するメリット

2020-06-11

(LastUpdated: 2020-06-11)

「HTMLとCSSを設計するのは本当に難しい」と、最近良く思うようになりました。奥が深い、というべきか。

ちょっとした機能でもCSSは難解になりがちですし、HTML側にクラスを増やせば、見辛いソースになりがちです。そして、何度書いてもそれらを解決するのが難しいという実感があります。

AMPテンプレートではbascssという、フレームワーク的なものが採用されています。これはとても合理的にできていて、気に入りました。

問題の全てを解決できる訳ではないのですが、一度使いだすとやめられないほど使い勝手が良いのです。

CSSフレームワークが使いづらい

CSSフレームワークはいくつか経験してきたんですが、いまひとつ利便性を理解できていませんでした。正直なところ、あまり必要に思えませんでした。

確かに、初期のプロトタイプを作るには良い。しかし、結局カスタマイズが必要になってくるフェーズになると、「ことごとくクラスを外していく」というパターンが非常に多かったのです。

もちろん、これは僕自身のフレームワークへの理解の甘さもあるかと思います。

AMPのテンプレートでは、CSSフレームワークとしてbascssを使っています。これはフレームワークというにはあまりにシンプルで、ほとんどスタイルのプロパティが当てられたクラス群といった感じです。このフレームワークのコア思想は、ブロックに対してのビジュアルデザインをHTMLで表現していくことです。

これで何が起こるかといえば、CSSとHTMLの関係性が分離できます。

レイアウトを制御するHTMLでデザインまで管理できるので、比較的わかりやすい作り方になります。

注意する点は、HTMLをそのまま書いていく場合には、記述が煩雑になるかもしれません。特に同じレイアウトブロックを繰り返す場合には、同じクラスを当てていくので記述は面倒ですね。

メタ言語やHTMLをジェネレートするフレームワークでは一度書けばイテレーションしてくれるので気にする部分が最小限ですみます。

CSSは非常に便利なのですが、ページの描画のスピードにおいては最良の選択というわけではありません。 HTMLにインラインで書かれたスタイルの方が早いからです。

とはいえ、CSSフレームワークも、結局はCSSを読み込ませているため、そのロードに時間がかかります。

結局のところ、複数のコンポーネントにおけるCSSの記述は肥大化しがちで、共通している記述も多いということがいちばんのネックです。

CSSのメリットの一つは共通する設定をまとめることですが、大抵において全てが一致するコンポーネントというのは結構少ないです。ちょっと違ったパターンや微妙にディティールが違うなんてのが結構あり、結局使い回せずパターン違いを書く、ということになります。

SASSなんかのメタ言語を使うと、このあたりがとても便利に拡張できるわけですが・・・これこそが落とし穴。

デザイナーの記述量は減ったものの、コンパイルされるコードは減るわけではないのです。

そこで、CSS設計の重要性が出てきます。使い回せそうなレベルのクラスをいくつか用意して、html側で複合して使っていくというパターンです。

例えば、ボーダー。

.border {
	border-width: 1px;
	border-style: solid;
}
.border-white {
	border-color: white;
}
.border-gray {
	border-color: gray;
}

このようにしておけば、単にボーダーを指定するところと、ボーダーの色だけ独立しているので、使い分けられるというわけです。

<div class="border border-white">
	<p>こちらは、白いボーダー</p>
</div>

<div class="border border-gray">
	<p>こちらは、グレーのボーダー</p>
</div>

つまり、HTML側でスタイルまでを設計できるというわけです。

これまで、CSSでコントロールをしてきた身からすると、ちょっと面倒な気もしますし、HTML側でそれやるってどうなの？という気持ちもありますが、ある意味ではいちばん明快なスタンスです。

これの利点はHTMLを見るだけで、スタイルの状態が把握できるところです。

歴史ではHTMLにスタイルを描くことから、CSSに移行していきました。そして、今またHTML側にスタイルを書いていくことになろうとは、思いませんでした。

一周回ってきた感じですね。

HTML側がかなり汚れた感じがしますが、これはこれで、関係性が分かりやすいと思います。特に、コンポーネントごとに分けている場合は、とても有効な手段だと感じます。

レイアウトをざっと作っていくときや、プロトタイピング的な場面では絶大な利便性を発揮するのは確かですね。