css カスタムプロパティ(css変数)専門ライブラリの調査

tailwind は使いたくないが、css にマジックナンバーが埋め込まれるのは辛いので、ユーティリティファースト的なアプローチ自体は使いたい
→ css 変数で管理するのがよさそう
→ 全て自作してもさほど大変ではないが、まだ求める像が自分の中で固まってないなかでフルスクラッチはなかなか大変なので、まずライブラリとしてまとまっているものを使ってイメージを固めたい

ので、どんなのがあって良さそうか調べてみる。

para7

要は「"こっちでは8pxで指定したけどあっちは9pxでした" のように微妙なズレを防ぐため、数値指定の幅にある程度制約をかける」っていうのが求めている内容になる。
tailwind のメリットである制約による統一感を、tailwind 以外の方法で実現したい。

じゃあ tailwind 使えばという話になってくるが、諸々の理由から tailwind を使うのは避けたく（これはアンチ tailwind 記事ではないので詳細は割愛）、手ごろな代替手段を模索している感じ。

para7

Radix Colors

この発想の発端。別で記事にしている。

色選択基準の明示
容易なダークモード対応

特に前者がありがたい。red-100 とか red-200 とかが並んでるだけだと結局色選択に悩むので、色を選ぶだけで濃淡はドキュメント読めば自動的に決まるのは大変捗る。デザイナー不在で作るなら非常に取り回しがよい。

para7

dashvar

https://dashvar.com/default/docs

npm 見たらDL2桁で3年前に活動停止しているが、今回のようなケースでは余裕で選定範囲内。ただまあMITライセンスだし npm install ではなくコピペで展開した方がいいかもしれない。

中身はこんな感じ: https://cdn.jsdelivr.net/gh/dashvars/dashvar/dist/dashvar.css

--size-00: 0px;
--size-01: 0.125rem;
--size-02: 0.25rem;
--size-03: 0.5rem;
--size-04: 0.75rem;

コミットメッセージに

Import some variables from Tailwind CSS

と書いてある通り tailwind 味を感じる。わりと求めていたものって感じではある。

size, box-shadow, border-radius, opaciry, font-size あたりと、transiton の一部はかなりいい感じ。
採用しないにしても、かなり参考にしていける部分はありそう。

para7

だいたい radis-colors と dashvar 系で実装に不自由ないのでクローズ

このスクラップは2024/08/16にクローズされました