自動生成原子CSSについて

Robin WeserのAtomic CSSにおける速記のジレンマの調査は、HTMLとCSSを最適化されたスタイルに自動的に変換するという課題を強調しています。コアの問題は、ショートハンドとロングハンドCSSプロパティの相互作用から生じるエッジケースの取り扱いにあり、アトミッククラスを生成するFelaのようなフレームワークを使用する場合、潜在的なエラーにつながります。

アトミックCSSの概念 - 1つのクラス、1つのジョブ- は興味をそそられます。この例を考えてみましょう。

 <code>.mb-8 { margin-bottom: 2rem; }</code>

そのようなクラスの何千ものクラスを想像して、ほぼすべてのCSSの可能性をカバーしてください。

なぜアトミックCSSを使用するのですか？いくつかの説得力のある理由があります：

• CSSの削減：繰り返されるプロパティ/値のペアと著者固有のクラス名を排除すると、最終的なCSSファイルサイズが大幅に縮小します。 CSSはブロッキングリソースであるため、これは重要です。
• 簡素化された命名：時間のかかるクラス名のブレーンストーミングはもうありません。
• 設計の一貫性：利用可能なクラスを制限すると、ある程度の設計の均一性が実施されます。
• 開発者の速度の向上：一部の開発者は、このアプローチがより速く効率的であると感じています。

原子CSSの生成は、手動で実行できます（GithubとFacebookがそれぞれPrimerとFB5で行ったように、これは必ずしも推奨されるわけではありません）、または事前に構築されたフレームワークを使用して。タチョンは、原子クラスの大規模な意見のコレクションの初期の例です。

ただし、 Tailwind CSSが支配的なプレーヤーです。その強みは次のとおりです。

• 構成可能性：プロジェクトのニーズに合わせてクラスをカスタマイズします。
• 未使用のクラスをパージする：この重要なステップにより、未使用のクラスが削除され、アトミックCSSの完全なパフォーマンスの利点が実現します。
• ビルトインUIライブラリ：すぐに利用できるコンポーネントで開発を加速します。

しかし、アトミックCSSを自動的に生成するのはどうですか？

Yahooのアプローチは、ビルドステップ中に処理されたクラス名として関数を使用して、現在の方法を予見しました。これは、Tailwind Purgecssの組み合わせに似ています。

今日、アトミックCSSを手動で書く必要はありません。 Weserが指摘するように、Fela、Styletron、React Native Web、Otion、StyleSheetなどのライブラリを使用すると、ビルドプロセス中にアトミックCSSを生成しながら、おなじみの方法でスタイルを作成できます。このアプローチは、再利用性を最大化し、最終的なCSSバンドルサイズを最小化します。各プロパティ値ペアは一度だけレンダリングされ、効率が向上します。

多くの場合、CSS-in-JSに根ざしたこの方法は、最適な結果を得るためにマークアップとCSSの両方を処理します。これは、著者を含む多くの開発者が魅力的でないと感じる原子CSSを手動で書くことに魅力的な代替品です。主な利点は、Webパフォーマンスを改善するための自動最適化です。

問題は残っています：このアプローチについてどう思いますか？

以上が自動生成原子CSSについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。