「ちょうど間に合う」CSS

原子CSSの台頭とその「インスタント」編集：CSSを書く新しい方法

ACSS.IOは、「原子CSS」の概念を採用した最初のプロジェクトであると考えられており、その中心はCSSの編集にあります。このようなCSSを書くだけです：

<code><div>
  文章
</div></code>

このようなCSSを生成します。

 <code>.C\(\#333\) { color: #333; } .P\(20px\) { padding: 20px; }</code>

（または同様のコード）。

重要なのは、実際に必要なCSSのみを生成することです。 CSSコードの最終的な量は、通常のスタイルシートのコードよりもはるかに小さいです。

この編集プロセスは、「Just In Time」CSSと呼ばれます。

人気のあるTailwindフレームワークもこのアプローチをサポートしています。私にとって、これはTailwindの考え方をひっくり返しました。多数のCSSユーティリティクラスを提供し、未使用部品を「クリーニング」する代わりに、最初から必要なCSSを作成するだけです。

「インスタント」CSSの概念は人気があると思います。私は最近アセンブラーCSSを見てきましたが、これを非常に真剣に受け止めています。クラスを使用するようなものではありませんが、次のようになります。

<code><div x-style="grid; gap:1rem; grid-rows:1; grid-cols:1; sm|grid-cols:3">
  提出する
</div></code>

私はこのアプローチに少し対立しています。一方では、テンプレートを離れることなくスタイルを整える方法が好きです。特に、CSSはブロッキングリソースであるため、生成する非常に少量のCSSコードが好きです。しかし、一方で、CSS自体の制限的な抽象化が好きではなく、ツールがCSSネイティブ機能をサポートする程度の下に置いておきます。また、HTMLは少し複雑に見えますが、JSXのインラインイベントハンドラーのようなものに慣れています。

以上が「ちょうど間に合う」CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。