CSSを使用する人が増えてきました。CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。CSSが私には合わなかった理由を紹介します。CSSについて詳しく知りたい人は、以前の記事をご覧ください。下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。CSSが好きなら使用すればいい。CSSをめぐってネット上で白熱した議論をしました。私はこのことを誇りに思っているわけではなく、誰かと対立することも好きではありません。CSSを構築している人たちは才能があり、いい人たちだと思います。CSSを好きではありません。誰かのために作られたものだとしても、私のために作られたものではありません。ある意味、それは問題ありません。私が絶対に使用しないWebのテクノロジーはたくさんあります。いって、それらが悪いということではありません。グルーヴィーな技術スタックはいくらでもあります。CSSに将来性がある」という世間の感情が高まっていることです。それは物事があるべき姿です。言い換えれば、オピニオンリーダーで、エバンジェリストを鼓舞しているということです。繰り返しになりますが、あるレベルでは問題ありません。Railsはオピニオンリーダーで、私はRailsを使用するのが大好きです。CSSは間違いなく手袋を投げつけて決闘を挑んできます。Wathan氏の言葉を引用します。「ベストプラクティス」では機能しません。従来の「セマンティックスなクラス名」ではCSSの保守が難しい理由については何千もの言葉で書いてきましたが、実際に試してみるまで、私を信じてもらえないというのが本音です。あなたが、この方法を試したい、という気持ちを抑えることができれば、CSSを今まで他の方法でどのように使用していたのか不思議に思うようになると思います。この挑戦を受けました。CSSを実際に試し、実務レベルで使用しました。CSSで構築されています。CSSを使用していないと私を非難することは誰にもできません。私にはまったく合いませんでした。CSSにいくつかの懸念を抱いています。CSSの熱烈なファンから非難を受けます。90年代後半からこの業界でフルタイムで働いてきたプログラマーとして、納得できません。CSSが私に合わない理由を説明したいと思います。CSSは汚いHTMLを推進している1つ目の理由は美的な懸念ですが、後に説明する技術的な課題と密接に関係しています。少なくとも私は、ユーティリティCSSのみのHTMLの見た目が嫌いです。あー、いやだ、イヤだ、嫌だ。Adamは「チャンスを得るために十分な時間をかけて、後悔したい衝動を抑えてください」と、このことを真正面から認めています。CSSでマークアップを書くことは最初は醜くて奇妙に見えるけど、メリットが非常に大きいので、最終的には「それを乗り越えられる」という暗黙の了解です。CSSを書き始めて1年が経ちましたが、いまだに乗り越えていません。私にはメリットが多いことに感謝ができませんでした。Radio</p></div>HTMLをクリーンに保ちたいなら、@applyを使えばいいんだよ!という声が聞こえます。それは潜在的な解決策であり、実際に前述のプロジェクトで私たちは行いました。HTMLの多くはコンポーネントスコープされたクラス名(実際にはBEMに近い)を対象にしているため、@applyを広範囲に使用します。ここで次の懸念が出てきます。CSSのファンはここで多くの人がつまずいて、何度も何度も議論し続けるので、できるだけ分かりやすく明確に説明したいと思います。CSSを使用している場合にのみ機能します。CSSが存在する必要があります。CSSを削除すると、そのCSSは機能せず、レイアウトは壊れてしまいます。CSSを使用せずにサイトの出力されたCSSを取得して使用することもできますが、通常はコードベースに散在する数百もしくは数十の小さなCSSをまとめてコンパイルしたものです(コンポーネントごとのCSSファイルを生成する場合)。それはソースコードに頼れるものではないということです。CSS用に構築されたCSSファイルは非標準(別名プロプライエタリ)であり、他のすべてのCSSフレームワークやツールとは基本的に互換性がないのは事実です。CSSに使用すると、そこから抜け出すことはできません😱また、おまけとして、基本的にすべてのCSSファイルを@applyで記述することは、CSSを学習して作成していないことを意味します。CSSを作成しているのです。flex;と書くことと同じではありません。多くの場合、プロジェクトで定期的にCSSフレームワークを交換する習慣がないことは理解しています。実際に私は交換をしました。クライアントのプロジェクトでFoundationからBulmaへの移行です。大量のHTMLと使用中のスタイルシートを更新する必要があるのは事実ですが、以前に作成したカスタムのスタイル定義は手間をかけずに再利用できるので安心してください。プレーンな古いCSS(またはSass)は、何があっても機能します。@applyは一見クールに見えますが、結局は巨大な松葉杖になります。Gridを簡単に実装できます。Gridを本当に理解していないかもしれません。CSS標準を知らないままです。壮大なスキームの中で@applyが不要な理由として、3つ目の理由につながります。CSSが最初に好まれるポイントは、優れたデザインシステムと微調整できるトークン(カラー・フォントサイズ・スペースなど)がすぐに使用できるからです。見栄えのよい結果をすぐに得られるのは簡単です。問題は、これらすべてのトークンがJavaScriptで定義されていることです。CSSはCSSのフレームワークですが、デザイントークンにJavaScriptを使用しています(2021年現在)。言いたくはないのですが、最近のブラウザはCSSのカスタムプロパティ(変数)と呼ばれるものをサポートしています。デザイントークンは:rootレベルで変数として定義することができ、どこでも利用できます。サイトが読み込まれている間にリアルタイムで変更したり、DOMツリーの特定の要素を上書きすることもできます。それらはWebコンポーネントとの相性も抜群です。これについての詳細は後ほど説明します。2rem;のスタイルが適用されます。var(--spacing-8);を記述します。CSSがデザインシステムに非標準のJavaScriptベースのビルドプロセスを使用しているということです。CSSに対する最大の問題点かもしれません。Webコンポーネントが存在しない世界で考案され、推進されたようです。DOMでは全く使用できません。CSSのスタイリングの一部をビルドプロセスを通してコンポーネントにインジェクトできるソリューションを考え出しましたが、それは間違いなくハックです。DOMを介したグローバルなテーマとスタイルのすべてが連携するWebコンポーネントベースのデザインシステムを構築する方法があります。繰り返しになりますが、これらはすべてモダンブラウザに組み込まれたネイティブのテクノロジーに基づいて行うことができます。肩をすくめてReactやVueに戻る前に、Webコンポーネントは今日のHTML/CSS/JavaScript仕様の不可欠な部分であるだけでなく、ブラウザのテクノロジーのさらなる進歩の中心になりつつあることが増えていることを覚えておいてください(例えば、将来的にフォームコントロールの高度なカスタマイズがどのように機能するかなど)。CSSは、BootstrapやFoundationやまたは数年前に作成されたCSSフレームワークと比べて何の役にも立ちません。CSSはdivとspanタグのスープを推奨しているこれは前述にも書きましたが、それだけではありません。マークアップのあらゆる場所で<div>と<span>を使用することはアンチパターンであると確信しています。わたし達はカスタム要素(別名<whatever-you-can-dream-of>)がモダンブラウザで完全にサポートされ、有効になっている世界に住んでいます。class="card"><div>と記述しなければならない理由は事実上ありません。実際に、非常に表現力のあるマークアップを記述するために要素と一緒にカスタム属性を使用することは可能です。このマークアップには非常に未来があります!ShoelaceのWebコンポーネントライブラリを例にとってみましょう。下記がボタンのHTMLです。name="gear"></sl-icon>Settings</sl-button>モーダルも見てましょう。type="primary">Close</sl-button></sl-dialog>上記のコードは、JSXでもXMLでもありません。通常のHTMLに変換しなければならないテンプレート言語でもありません。モダンなマークアップはこんな感じです。CSSのホームページの例と比較してください。py-2">New</button>、、、🤢HTML/CSS/JSの未来の姿がここにあります。バニラCSSでカスタムメイドのグリッドやフレックスボックスのレイアウトをすばやく簡単に記述でき、CSS変数でデザイントークンを定義し、Shoelaceのような適切に設計されたWebコンポーネントライブラリを利用することができます(もちろん、2つまたは3つを混ぜて使用することもできます)。パフォーマンスを管理可能なレベルに戻すためにパージする必要のあるメガバイトのTailwindユーティリティクラスを必要とせず、見た目が素晴らしく、非常にうまく機能するWebサイトやアプリを手に入れることができます。デフォルトでWebコンポーネントと互換性がなく、CSS変数を最小限に活用するだけで、関連するスコープスタイルのカスタム要素や属性を推奨していません。ここで疑問が湧いてきます。CSSでどのようにして「モダンなWebサイトを構築」できるのでしょうか。純粋な技術的なレベルでは正直なところ、Bootstrapよりも改善されているとは思えません。Bootstrapは少なくともオープンソースのコンポーネントライブラリを無料で提供しています。CSSを使用する場合、彼らは支払いをあなたに求めます。CSSが好きなら使用すればいい。目指すべき未来であると私に納得させようとするのはやめてくださいわたし達は、どんな技術でも相対的なメリットや問題点について何度も言い争うことができます。CSSを選択することは確かにいくつかのメリットがあります。ユーティリティクラスを使用してたくさんのdivタグを記述するだけで、白紙のページから派手なパンツのデザイン🩳にすばやく移行することができます。CSSは私が望む方向性ではないと確信しています。CSSのファンの皆さんには申し訳ないのですが、私を納得させるような説得力のある議論はありませんでした。CSSが私には合わなかった理由です。