HTMLのstyle属性を活用した反ユーティリティファーストなCSS

先日、Tailwind CSS に代表されるユーティリティファーストのようで、実はそれと真逆を行く ユーティリティCSS「Selectorize CSS」を GitHub で公開しました。今回は「Selectorize CSS」を作った経緯などを紹介したいと思います。

Selectorize CSS について

Selectorize CSS は過去の記事「カスタムプロパティ (CSS変数) を使った爆速レイアウト術」の内容を発展させたものです。

Selectorize は「セレクタ化」を意味します。HTML の style属性 に設定されたカスタムプロパティ (CSS変数) をセレクタとして利用しています。メインとなるファイルの selectorize.css には、セレクタとして利用可能なカスタムプロパティが次のようなフォーマットで並んでいます。

[style~="--PROP--:"] { PROP: var(--PROP--); }

例えば、HTML で次のように設定すると文字が赤くなります。

<div style="--color--: red;"> … </div><!-- ≒ <div style="color: red;"> … </div> -->

style属性 のカスタムプロパティを介してスタイルを適用するメリットは色々ありますが、それは GitHub の Selectorize CSS の説明を見ていただくとして、やっていること自体はユーティリティファーストのようですよね。

しかし実際は、様々なデザインシステムや既存の CSS に組み込むことを前提としているため、ユーティリティファーストではありません。設定しているのはカスタムプロパティという変数なので、その変数をどのように扱うは CSSコード を書く側に委ねられている、そういった ユーティリティCSS になります。

誰でも簡単にウェブサイトが作れる時代に定着する手法

Wix, Jimdo, Studio といったサービスの台頭、AIの活用により、ノーコードでウェブサイトが作れる時代になりました。それを可能としているのは、直感的にレイアウトやデザインを操作できるエディターの存在です。

エディターには色々ありますが、大きさ・位置・色などを細かく制御するために style属性 を多用するというのも少なくありません。

Selectorize CSS は、意味を基準にマークアップする論理マークアップ (セマンティック) と、表現を基準にマークアップする物理マークアップ (非セマンティック) の狭間で生まれた妥協の産物です。物理マークアップを完全に排除してセマンティックに作るというのは理想的ではありますが現実的ではありません。

ならば、物理マークアップの1つの象徴とも言える style属性 とどう向き合うか考え直す必要があると思いました。

Selectorize CSS は、style属性 を如何にしてセマンティックな制作手法に生かすかという問いの1つの答えになると思っています。

WordPress のブロックエディターとの相性

Selectorize CSS とブロックエディターの相性はとても良いです。class属性 だけでは実現できない細かな制御ができて、CSSコード が肥大化しにくいです。ということで、カスタムブロック開発者さんのご利用お待ちしています。というか、コアに組み込んで欲しいと本気で思っています。

〆

この頃、Google Gemini とよく対話するようになりました。「selectorize.css」の CSSコード を見てもらったら、かなり良い反応だったので、GitHub に上げてみました。是非ともお試しください。