ユーティリティCSSは「末尾に置く」だけでは勝てない

2026-08-31

社内向けのダッシュボードで、表ヘッダ 44 件すべてが右寄せにならなかった。
.u-right という整列ユーティリティを当てているのに、効いていない。

順序より先に、詳細度で決まる

原因は単純だった。

セレクタ	詳細度
`.tbl thead th`	0,1,2
`.u-right`	0,1,0

ユーティリティを末尾に置く運用は、詳細度が同じときにしか成立しない。
負けている限り、読み込み順をどう並べ替えても結果は変わらない。

対処は、整列ユーティリティだけクラスを 2 回書くこと。

.u-right.u-right { text-align: right; }

詳細度は「クラスの個数」が要素セレクタより先に効くので、.u-right.u-right は (0,2,0) になって勝つ。
表ヘッダの背景を上書きしたいときも同じで、.grp-derived 単独では負ける。
.tbl thead th.grp-derived と書く必要がある。

この不具合が長く残ったのは、壊れ方が中途半端だったからだ。

td 側は .tbl tbody td が text-align を持っていなかったので、右寄せが効いていた。
つまり数字の列は揃って見えていた。効いていないのはヘッダだけで、
スクリーンショットを眺めても違和感が出ない。

全部壊れていれば一目で分かる。半分だけ効く不具合は、目視レビューをすり抜ける。

このプロジェクトには、CSS の読み込み順を凍結するテストがあった。
「トークン定義 → コンポーネント → ユーティリティ」の順であること、
.u-* の規則がコンポーネント規則より後ろにあること。どちらも通っていた。

順序は正しいまま、無音で効いていない。これはテストが見ている軸の外側にある。

検査は「誤検出」より「空振り」で壊れる。誤検出はうるさいので必ず気づくが、
空振りは「緑だから安全」に化けるので永久に気づかない。

だから計算済みスタイルで実測する層を足した。
.u-right / .u-num / .u-center を持つ全要素について、
ブラウザが最終的に採用した textAlign が宣言と一致するかを見る。
7 画面・1,549 件を実測している。

静的な側（読み込み順の凍結）も残した。両方について、
わざと壊して赤くなることを確認してから採用している。

同じ表で、もう一つ踏んだ。

縦にも横にも固定される左上の角セルは、行ヘッダと列ヘッダの両方より手前に来る必要がある。
これを上部バーと同じ z-index にしたところ、DOM 順で後ろにある角セルがバーを覆い、
画面名が隠れた。

層の間に値を足して解決した。あわせて z-index を直接書くのをやめ、
--z-sticky-corner: 6 のようにトークンとして層で持つようにした。
数値を直に書くと、次に層を足したい人が「6 と 7 の間」を作れない。