みなさんこんにちは！ 2月末までに新しいCSSブックをリリースする予定です。これは、 MacFarlandを既にマスターしているすべての人にお勧めします（まだ入手可能ですが、1月に次の過剰な圧力をかける予定です）。
本日、キースグラント（6月発行）の記事を翻訳するよう招待されました。著者はCSSについての彼の見解を示し、本で話したいことを実際に説明しています。 読んでコメント！
CSS指向の思考とは何かについて考えるのに多くの時間を費やしました。 一部の人はそれを「学習」することができますが、そうでない人もいます。 この世界観が何であるかを明確に表現できれば、CSS自体はそれらを扱う人にとってより理解しやすくなると思います。 これが、私が座ってプロフェッショナル向けの本CSSを書いた理由の一部です。
今日、もう一度この問題に取り組みたいと思います。 この言語を従来のプログラミング言語と区別する3つの重要なCSS機能を検討してください。 CSSは永続的で、宣言的で、コンテキストに依存しています。 言語のこれらの側面を理解することは、CSSマスターになるための重要な前提条件だと思います。
CSS耐性
JavaScriptファイルのコードを誤って削除すると、使用されているアプリケーションまたはWebページがほぼ確実にクラッシュまたはフリーズし、スクリプト（またはページ全体）が失敗します。 CSSで同じことを行うと、何も気付かない場合があります。 削除されたフラグメントを除く他のほとんどすべてのコードは、正常に機能し続けます。
このプロパティは回復力と呼ばれます。 HTMLおよびCSSは、耐障害性を期待して特別に設計されています。 問題が発生すると、ブラウザはエラーをスローします。 それ以外の場合は、コードのこの部分を単に無視し、さらに先へ進みます。
デバッグの観点から見ると、これはばかげているように思えるかもしれません。プログラムがエラーをスローしない場合、どうすれば問題が発生したかを知ることができますか？ しかし、これはCSSデバイスの最も重要な側面です。 それは舌自体の生地に織り込まれています。 私は認めます、それに慣れるには時間がかかります。 ただし、これを理解するとすぐに、すべてのブラウザでサポートされていない機能を安全に使用できます。 これにより、サイトまたはアプリケーションの進歩的な開発が保証されます。
この例をメッシュレイアウトで検討してください。 グリッドをサポートするブラウザーと、グリッドをサポートしないブラウザーの両方で機能します。 グリッドがサポートされていないブラウザでは、レイアウトはわずかに不均一になります（要素の正確なサイズは異なる場合があります）が、ページはほぼ次のようにレイアウトされます。
.portfolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .portfolio__item { display: inline-block; max-width: 600px; }
2つのグリッド宣言を理解していないブラウザーはそれらを無視し、他のルールのおかげで作業を完了することができます。 次に、グリッドを理解するブラウザはグリッドレイアウトを使用し、インラインブロック宣言を無視します（これによりグリッドがこのように機能するため）。 ジェン・シモンズは、この現象を冗談で「 量子CSS 」と呼んでいます。 CSSの機能をいくつか使用し、「同時に使用することと使用しないこと。 しかし、同時に機能し、機能しません。」
この「安全」動作の現象は、CSSを扱う上で不可欠な部分ですが、ほとんどの従来のプログラミング言語には当てはまりません。
CSS宣言的
JavaScriptでは、プログラムがどのように結果をもたらすかを説明する特定の段階的な手順を記述します。 CSSでは、画面に表示したい内容をブラウザに伝え、ブラウザはこれを行う方法を見つけます。 これを理解することは非常に重要です。 これを学べば、CSS はあなたのためにすべてのハードワークを行います 。学ばなければ、CSSの本質を掴み、何度も失望するでしょう。
CSSを記述するとき、実際には制約システムを設定しています。 各特定の要素がページのどこにあるべきかをブラウザに示しませんが、それらの間のインデントが何であるかを通知します。その後、ブラウザ自体がすべてをその場所に配置します。 コンテナの高さをブラウザに指示しません（少なくとも、指示しないでください）。 ブラウザは、表示中にこれを決定できます。コンテナの内容を知っているとき、このコンテキストで使用されている他のスタイル、ビューポートの利用可能な幅を知っているとき。
あまりにも多くの変数を考慮する必要があります。 CSSの本質は、これらすべての変数を心配する必要がないようにプロセスを整理することです。 制限のシステムを定義します。 言語自体が詳細を処理します。
簡単な例
このようなCSSサンプルを見てみましょう：
font-size: 2em
このコードは何をしますか？ 「フォントのサイズを大きくします」とあなたは言います。 しかし、それだけではありません。 また、コンテナ内のテキスト行のハイフネーションも修正されます。これは、各行に収まる単語が少なくなったためです。 したがって、これにより多くの場合、テキスト行の数が増加し、コンテナの高さも増加するため、これらの新しい行がコンテナに収まります。 コンテナの高さを変更すると、このコンテナの下のページにあるすべてのテキストがそれに応じて移動します。 最後に、上記のコードは
em
ローカル値も設定します。
em
単位を決定するために使用された他のすべてのプロパティの値は、再計算する必要があります。
このアナウンスだけで、ページ上の変更のループ全体が生成されます。 そして、それらはすべて、あなたが努力しなければならないことを正確に達成するように設計されています：コンテンツは常にページに収まり、要素は互いに重なり合わず、フォントのサイズに依存するすべてのプロパティが修正されます（インデントなど）。 これらすべての詳細について考える必要はありません。 ブラウザ自体が上記の計算をすべて実行し、デフォルトでこれを実行します。
これが起きないようにするには、これもできます。
max-height
および
overflow: auto
プロパティを使用して、コンテナの高さを厳しく制限できます。 内側の余白を再定義して、
rem
または
px
単位で測定されるようにすることができます。つまり、フォントサイズの後に再カウントされません。 これにより、CSSを使用することの興味深い側面が明らかになります。ブラウザに何をすべきかを言わないこともありますが、実際には、何もすることを禁じています。
グリッドの利点
ただし、CSSにはさらに優れた新機能があります。 最も一般的な例は、FlexboxとGridです。 ほんの数回の発表-そして、あなたはまさに機能する非常に柔軟なメッシュレイアウトを持っています。 多数の特殊なケースを心配する必要はありません。 実際、ブラウザーに「これらのブロックをそれぞれ400ピクセル幅の列に積み重ねる」と伝えると、ブラウザーがそれを行います。 すべてについてのすべてには、約3行のコードが必要です。
これを強制的に実行しようとした場合、多くの奇妙なシナリオに対処する必要があります。 ブロックの1つが長すぎるとどうなりますか？ ビューポートが狭すぎる場合はどうなりますか？ そして、それが非常に広い場合は？ ある要素にコンテンツのシート全体があり、別の要素にほんの数語しかない場合はどうでしょうか？ 確かに、CSSではこれについて考える必要はないでしょう。 すべてがすでにあなたのために考え出され、仕様に定められており、ブラウザはあなたのためのルールに従います。 これが宣言型言語の力です。
もちろん、これには妥協がないわけではありません。 宣言型言語で必要な機能（「ブリッジ」など）がサポートされていない場合、祖父のトリックやJavaScriptに依存することに変わりはありません。 さらに、CSSの開発は、長年にわたってそのようなものとの戦いに専念してきました。 幸いなことに、FlexboxとGridの開発により、ハッキングなしで多くのことができるようになりました（そう、ルーズな要素はハックです）。 それでもこの状況で何かが足りない場合は、ブラウザで定着し始めているCSS Houdiniについて読むことをお勧めします。
CSSはコンテキスト依存です
React時代に、私たちは非常に実用的なアプローチを採用しました：コンポーネントに基づくモジュール開発。 BEM、SMACSS、CSS-in-JSとともに、CSSの推奨プラクティスと一致しています。 これらの機能は大規模なアプリケーションを作成する上で重要な役割を果たすため、これらすべての機能の重要性を軽視したくありません。 しかし、CSSは100％モジュール式ではなく、そうすべきではないことを認識することも同様に重要だと思います。
これには2つの理由があります。 最初で最も明白なのは、アプリケーションをグローバルスタイルで設計することです。 ほとんどの場合、デフォルトで使用されるページレベルでヘッドセットとフォントサイズを設定する必要があります。 その後、これらの値は、明示的に再定義されないすべての子孫要素によって継承されます。 また、ページ全体に体系的に適用されるデザインのいくつかの側面も必要です。カラーテーマ、ブロックの丸みのある半径、ブロックシェーディング、および全体的なマージンサイズ。 ページの一部で機能するローカルスタイルが、これらのグローバルスタイルのコンテキストで適用されます。
2番目のより微妙な理由は、CSSとデザインの決定の両方がページのコンテキストに依存することです。 次のCSSスタイルをページ上の要素に適用するとします。
.the-thing { position: absolute; top: 10px; left: 10px; }
このコードは何をしますか？ この要素がDOM内のどこにあるのか、ページの残りの部分にどのスタイルが適用されているのかを正確に知らないため、この質問に答えることはできません。 絶対配置は、最も近い祖先要素に対して行われます。この配置は、問題の祖先の種類、および適用された配置の種類によって異なります。
さらに、要素を互いの上にオーバーレイする能力（または不可能性）は、これら2つの要素がDOM内のどこにあるかに大きく依存します。 DOM内の要素をシャッフルすると、要素のレイアウトと要素の重なり方に大きな影響を与える可能性があります。 これが、ドキュメントフローとオーバーレイコンテキストが基本的な（場合によっては複雑ですが）トピックである理由です。
CSSのコンテキストの性質は、これがデザインの仕組みであるという事実に一部起因します。 エンジニアが橋を設計する場合、図面を見て、「すべては問題ありませんが、このビームは好きではありません。 彼女を連れ去ります。」 1つの梁を削除すると、橋全体の構造的統一性に影響します。 同様に、デザイン要素を変更するだけで、画面上の他のすべての要素が異なって認識されます。 多くの場合、複数の要素を互いに密接にまとめて同時に作成する必要があります。
たとえば、タイルの1つでタイトルを拡大すると、ユーザーにとってより明確になります。そのため、画面上の他の要素はそれほど重要ではないように見えます。 ここでは、橋の建設のように、物理面に制限はありません。 私たちは、人間の知覚に影響を与えるより「人道的な」法律について話している。 ページの要素は、独自の物理的特性を持つ画面に反映されます。作業時には、物理的世界の現実とそれをどのように知覚するかを考慮する必要があります。
ご存じのとおり、ソフトウェアアーキテクチャはモジュール性とカプセル化の原則に従います 。 コードは複雑であるため、このアプローチはコードレベルで正当化され、説明した方法を使用すると、問題を消化可能なフラグメントに分割できます。 ただし、このアプローチは不完全であることに留意する必要があります。 CSSでは、特定のモジュールで発生していることを完全に無視することはできません。
まとめ
説明されている3つの側面により、CSSは従来のプログラミング言語と区別されます。 これらの違いはすぐには頭に収まらないかもしれませんが、CSSの最も強力な側面です。 これらの原則を理解し、適切に理解することができた開発者がCSSの真の高みを達成することを提案します。