昨日、Facebookにこんな投稿が流れてきた。
CSSのパフォーマンスについて調査していたところ、衝撃の事実を知りました。
それは、
「CSSセレクタは右から左へと照合される」
らしいです。
ブラウザのCSS解釈方法についての衝撃事実 on @Qiita
詳しくはリンク先を熟読してほしいが、ざっくり説明すると
セレクタを .sample table td と、多数出現するような要素名を終点にするよりも、
.red と、各要素に直接付与する前提でクラスを終点にした方が、パフォーマンスが良いというのである。
この記事をTwitterでもシェアしたところ、平澤隆さんからReplyが来た。
ベストセラー「Web制作者のためのSassの教科書」の著者である。
この本は初版を持っている。ほんとうにわかりやすく、苦手としていたSaSSが使えるようになった。
慌てて読み返す。
書いてありますね(´Д` 😉
平澤さんは「うぇびんさんはコーディングに慣れているから読み飛ばしていたのだろう」と仰ったが、逆である。
これが書いてあるのは5章「現場で使える実践SaSSコーディング」で、単純な使い方まで理解するのがやっとだった当時は、概論をきちんと読めていなかったのだ。
SaSSが使えるようになり、CSSフレームワークも自作するようになった今、改めて読み返すと補足説明や実践編がたいへん勉強になる。
そういえば私もa-blog cms本の執筆に携わったときに、ちゃんと補足しなければと、章間コラムにやたら力を注いだではないか。これから知りたいことを読むだけではなく、著者の考えを理解できるところまでたどり着いてから再読する大切さを思い知らされた。
—-
さて、最初の記事だが、コーディングに慣れてくるとひとつの疑念が生じる。
最近のブラウザの性能を考えると、数百個レベルの同じ要素があるページでもない限り、パフォーマンスに劇的な差は生まれないのではないか。
もしそれが0.1秒の差で、かつ、セルの文字色を変更するのがそのテーブルだけだったとしたら（※）、その0.1秒を埋めるために文字色の変更を表の定義から切り離したり、すべてのtd要素にクラスを付ける作業をすべきだろうか。下手をすると、HTMLのファイルサイズの方が大きくなって本末転倒である。
※実はこれは自作のフレームワークでもずっと悩んでいる問題である。文字色、余白サイズなど、単一のプロパティを変更するユーティリティクラスは作っておいた方が良い。しかしマルチクラス設計に添ってコンポーネント内にクラスをつけまくると、例外に対処しにくいし流し込みの速度が下がってしまうのだ。長くなったし説明が難しいので、別の記事で書くかも
ウェブの情報というのはいろいろな気付きにつながるのだけど、基本的に無責任なものだ。だから複数の情報を調べたり、それは本当に素晴らしいのかと疑ってかかるよう習慣づけている。
そのせいで新しいウェブサービスにすぐ食いつけないし、SaSSを覚えるのも時間がかかったのだが…