『Every Layout』を読んだ

『PDF版 Every Layout モジュラーなレスポンシブデザインを実現するCSS設計論』を読んだ。

とてもよい。このよさは監訳者であるyuheiさんのブログ記事「CSSにおける汎用化の先送り、ユーティリティファーストCSS、レイアウトプリミティブ」でよく言い表されていて、

パターンの収集という意味でレイアウトプリミティブは絶妙である。ウェブデザインの中で無意識的に繰り返されていたようなレイアウトの手法を拾い上げ、極めて汎用的な形式知に変換することによって、思いもしない抽象化の可能性が提示されたように感じた。

分かる。

今年の前半ぐらいまで割とHTMLマークアップの仕事も多く、「あーこのやつ、何度も書いてるよなー」と感じながらページを作っていた。しかしそれは、ボタン、とか、「画像＋テキストの組み合わせ」とか、セクション、とかいうコンポーネントの粒度ではどれも似ているけれど違うのだ。汎用的にコンポーネントを作って再利用しようとしても、パラメーターが増えてしまって、それなら毎度CSS書いても同じじゃん、となる。なーんか、やりようはあるっぽい雰囲気なんだけど、どうもうまい方法が見えてこない──はっきり言葉にしてこう考えていたわけではないけれど、もやもやとこう感じていたのだなと本書を読んだ今では思う。あと一押しだったのだ。こういう感じの人達は結構多かったのではないか、だから、日頃「なーんか似たようなことやってるなー」と感じているマークアップエンジニアは、この本を読んで「あと一押し」を獲得できる人と思う。

リンク先の記事に使われている画像を見てもらうのが早いのだけど、よくウェブページで使われるレイアウトを

• Stack（縦に等間隔に並べる）
• Center（水平方向中央揃え）
• Cluster（タグ一覧みたいに、複数行に跨るコンポーネント一覧）
• Sidebar（広い画面ではサイドバー、狭い時は縦並び）
• Switcher（広い画面では横並び、狭い時は縦並び）
• ：
• ：

などの「レイアウトプリミティブ」の組み合わせで大体作れる、と喝破して、それを実演して見せているのが素晴らしい。一つのコンポーネントやセクションに見える物も複数のパターンの組み合わせで出来ている。

素晴らしい、と言うか、これで一気に目が開かれた思いになった。これまでデザインを「視る」ためのフレームが自分の中に無かったのだ、と気が付かされた。これらを一度インプットしてしまえば、デザインカンプを貰った時に、これらのパターンに分解して視ることができるようになる。

こうして見ると、Chakra UIのStackとかBoxなんかが愛おしく見えてくる。

この本の構成要素は、

• よりよいCSSの書き方の原則
• レイアウトプリミティブのカタログ
• レイアウトプリミティブの作り方（CSSコード）

になっていて、僕は主に二つ目に感銘を受けたわけだけど、一つ目の書き方原則も中々いいことが書いてあって、セクションとかコンポーネントごとにクラス名を決めて、SCSSの入れ子でその中で主に各コンポーネントをレイアウトしていくやり方が何故よくないのか、といったことを説得力を持って書かれていて説得された（それがいいか悪いかということを考えたことすらなかった）。

三つ目の実際のCSSコードも、机上の空論じゃないことがはっきり伝わってくるし、知らないCSSテクニックも沢山あって単純に読み物として読んでいて楽しい。

これはマークアップする人みんな読んでほしいなーと思う。

印刷版、Kindle版、PDF版が発売されていて、僕はPDF版で買った。やっぱり標準化されたフォーマットは嬉しい。今時PDFなら、大体のソフトウェアで、メモを取りながら読むこともできるしね。