Sampa 2024 のフロントで CSS アーキテクチャの 3 つの柱についてプレゼンテーションを行ったことで、理論的な観點から CSS について多くを読む機會が得られ、CSS についてより成熟した全體的かつ戦略的な視點が得られたと感じています。大規(guī)模な CSS 開発。

このツアーで CSS に関する視點を発見し、好奇心が再燃しただけでなく、これらの新しい世界観で新しい決定を下すことに興奮しました。

循環(huán)的複雑性: CSS のロジック (Harry Roberts 著)

循環(huán)的複雑さはプログラムの複雑さの指標(biāo)です。各フロー制御と各出力により、メソッド、クラス、またはアプリケーションの複雑さが増加します。

CSS では、複雑さが原因で、セレクターが遅く、再利用性が低く、過度に特殊である可能性があります。

div.sidebar .login-box a.btn span {}

/*
Pode ser lido como

IF (inside .btn)
AND IF (on a)
AND IF (inside .login-box)
AND IF (inside .sidebar)
AND IF (on div)

*/

「セレクターをミニプログラムとして考えてください?！?/p>

CSSWizardry ブログの記事へのリンク (英語)

---

條件付きCSS by Ahmad Shadeed

CSS を論理演算を備えた言語として見ることの価値については、コンテキスト條件に従ってコードを使用可能にする論理評価を行うメディア クエリについてだけでなく、すべてのインタラクティブな狀態(tài)、次のセレクターの有無についても話します。セレクター インデックス、または特定の子の存在 (:has 付き) から。

これは、新しいプロパティと、:has、コンテナ クエリ、および既存だがあまり調(diào)査されていないサポート クエリによって引き起こされるパラダイム シフトに関する非常に最新の記事です。

Ahmad Shadeed のブログの英語記事へのリンク

---

CSS カスケード by Amelia Wattenberger

Cascade スタイルシートですが、CSS の記述方法と順序に関係する CSS エラーがよく見られます。 Amelia Wattenberger によるこの美しいブログ投稿では、シンプルかつ視覚的な方法でウォーターフォールがどのように機能するかを示し、それを念頭に置いて CSS について考える方法についての洞察を提供します。

Amelia Wattenberger のブログの英語記事へのリンク

---

CSS-in-JS の簡単な歴史: How We Get Here and Where We're Going by Dan Ward

CSS-in-JS を使用する必要があればあるほど、バンドルのサイズ、ランタイムの変更、再利用とコロケーションのアーキテクチャの混亂など、そのマイナス點がさらに気になりました。 CSS 変數(shù)を使用すると、スタイルを介して変數(shù)を挿入するのではなく、アロー関數(shù)を優(yōu)先することはさらに時代遅れになります。その方がはるかに簡単で、CSS はこのタイプのスコープを適切に処理します。

この記事では、それが存在する理由と仕組みを理解します。また、信じられないほどのリンクが全體を通して言及されています。

英語のメディア記事へのリンク

---

CSS とクリティカル パス (Stoyan Stefanov 著)

CSS は、Web の読み込み速度の遅さ、未使用で過剰な CSS、相互作用で必要以上に多くのノードに影響を與えるセレクターと操作、さらにはオーバーヘッドが少なく、より多くのアーキテクチャを必要とする複雑で遅いセレクターであっても、最大の原因です。

この記事では、この重要なアセットの読み込み、コンパイル、優(yōu)先順位付けにおいてブラウザがどのように動作するか、またエンド ユーザーにとってアセットへのパスを軽減する方法を理解します。

Stoyan Stefanov のブログの英語記事へのリンク

読んだ後、Frontend United での CSS パフォーマンスに関する Harry Roberts によるこのビデオをご覧ください

---

レスポンシブ Web デザイン

イーサン?マルコットは、空間の占有に特定の方法で応答する建築アセンブリに基づいて「応答性」という用語を作りました。この垣間見ることは、より少ないルールを指示するより自由な Web を求めた 200 年のジョン?オールソップの文章に觸発されました。デバイスの數(shù)が増加する世界では、ユーザーがインターフェースを記述する方法が変化しており、インターフェースの見方も変わるでしょう。

A List Apart ブログの記事へのリンク (英語)

読んだ後、応答性 - 本質(zhì)的なレイアウトについての最新の視點を備えた Jen Simmons によるこのビデオをご覧ください

---

閉じるには

CSS 読み込みの未來 by Jake Archibald

私は Google チャンネルで HTTP 203 を見ている Jake に出會い、それ以來彼のブログをフォローしています。この記事では、 の折り目にリンクを含める可能性を検討しています。 「折り目」の下にあるもののスタイルを段階的にロードします。

それが可能であることを知りませんでしたか?そうだ、ティルも!

Jake のブログの英語記事へのリンク

読んだ後、Chrome for Developers チャンネルの HTTP 203 ショーを見てください。Jake と彼のゲストから多くのことを?qū)Wびます

以上が4 でびっくりした CSS に関する記事の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。