2025/12/04 14:16
Should CSS be constraints?
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
記事は、CSS の本質的な複雑さを全面的に再設計したり制約ベースのシステムへ移行することで対処すべきではないと主張しています。代わりに、実際のデザインニーズに応じた明確で目的志向のレイアウトモードを追加して CSS を進化させるべきです。これによりエッジケースを最小限に抑えることができます。
例として、要素の中央揃えや「ホーリーグレイル」レイアウトなど、CSS を例だけで学ぶことの難しさを示す共通の痛点を指摘しています。著者は CSS 2.2 の最初の正式仕様書を書いた経験から、既存アルゴリズムとその欠点を深く理解していることが分かります。
制約システム（例：Cassowary）を代替案として検討していますが、未決定/過剰決定の制約、暗黙ルール、最適化基準、重み付き制約などによって予測不能性が導入されます。これらは LaTeX や iOS Auto Layout で見られる問題であり、デバイス間の一貫性をさらに悪化させる恐れがあります。
「Constraint Cascading Style Sheets」や初期の CSS レイアウトモードといった以前の研究は、UI デザインに対して適切ではなかったことを示しています。Flexbox や Grid のような現代モジュールはすでにより明確なメンタルモデルを提供しており、全体システムを一新するのではなくこれらのモジュールを洗練させ、新しい専門化モードを導入する道筋が示唆されています。
このアプローチは学習曲線を低減し、開発者の摩擦を減らし、企業がレスポンシブで保守性の高い UI をより効率的に提供できるよう支援します。なお、画面サイズ・ズームレベル・フォントレンダリング差異・言語長・デバイスノッチなど多様な条件下でレイアウトを設計することは、CSS に暗黙ルールを組み込まない限り本質的に不可能であるという点も認められます。
本文
CSSは難しい。レイアウト規則は非常に複雑で、例だけでは掴みにくい。たとえば「
<div>私はこのテーマについて語る資格がある。大学院では CSS 2.2 の最初の正式仕様を書き、規格は関連する適合テストを通過した。したがって既存アルゴリズムを詳細に理解している上に、デザイナーの実務や他システムについても触れられる。
置換としての制約ベース
提案されている代替は「制約システム」である。直接的に次のように宣言できる：
(obj.top + obj.bottom) / 2 == (obj.parent.top + obj.parent.bottom) / 2
これは
objこのアイデアは「Constraint Cascading Style Sheets」論文で探求されている。Alan Browning らは Cassowary の増分制約ソルバーを用いて、ブラウザが高速に制約を解き、ページ変更時（JavaScript など）にも効率的に再計算できることを示した。iOS の Auto Layout はその有名な実装だ。
制約ベースの問題点
現在の CSS のようなルールベースシステムは複雑で予測が難しい。一方、制約ベースシステムは「不足制約」または「過剰制約」に陥りやすい。つまり、制約を満たすレイアウトが複数あるか、そもそも存在しないケースが発生する。UI 用に制約を書き、十分な決定性（under/over determination）を保つのは実質不可能であり、単純な垂直中央揃えの制約でもサイズや位置が決まらず、「外枠が子要素を含むべき」など追加ルールが必要になる。さらに制約を増やせばぶつかり合う確率も上がる。
不足したレイアウトに対処するには「暗黙のルール」（例：ボックスは画面内に留まる）や最適化基準（例：スペースを最小限に使う配置を選択）を追加したり、制約に重みを付けて「破棄すべき制約を最少に抑える」ように最適化する。これが LaTeX の仕組みだが、重みや基準の調整こそがレイアウト外観の真の決定因子になる。単純なルールは奇妙なエッジケースを生むことが多く、高度なルールが必要になれば、結局予測困難なレイアウトに戻る。
iOS の制約ベースレイアウトは人気があるものの、脆弱性・冗長性・デバッグの難しさ（特に不足/過剰制約を扱う際）が残り、さらに iOS は限定的な画面／ウィンドウ形状しかサポートしていないため、そのパターンが汎用化できるとは言い難い。LaTeX も同様に予測性が絶対に高いわけではない。
根本問題
レイアウトのエッジケースが多い理由は、レイアウトが「画面サイズ」「ズームレベル」「フォントレンダリング差異（Windows vs. macOS）」「OS の詳細」「新しいコンテンツ」「翻訳」「ノッチなどデバイス固有の欠陥」など多数のパラメータに適応しなければならないからだ。これら全てで美しく見えるレスポンシブレイアウトを設計することは、暗黙的知識がどこかにエンコードされていない限りほぼ不可能だ。
具体例として、CSS 2.2 の
text-align:center[(is-text-align/center textalign) (= (- (left-outer f) (left-content b)) (- (right-content b) (right-outer l)))]
これは「コンテナ
btext-align: center一般にデザイナーは「等間隔配置」「正規化」など、西洋の長い排版伝統から導かれた暗黙ルールに頼ってきた。現代のウェブレイアウトでは、狭い列や極端な語長が頻繁に発生するため、その暗黙ルールだけでは不十分だ。
代替案
根本から再設計するよりも、CSS を「直感的でエリスティックな規則を減らし、暗黙知識を明示化した」形に改善すべきだ。具体策としては：
- ネガティブマージン・フロート・
（旧 A List Apart 技術）を活用する。clear:both - Flexbox や Grid を採用し、初期学習コストは高いがより明確なメンタルモデルと鋭いエッジを減らす。
JavaScript の問題点（例：
for…inwitheval結論としては、CSS を完全に放棄するのではなく、「直感的かつ明示化されたレイアウトモードを追加し」進化させていくことが最善策だ。