4 でびっくりした CSS に関する記事-CSSチュートリアル-php.cn

4 でびっくりした CSS に関する記事

Patricia Arquette

リリース： 2025-01-05 09:14:39

オリジナル

936 人が閲覧しました

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

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

Artigos sobre CSS que explodiram minha cabeça em 4

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

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

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)

*/

ログイン後にコピー

「セレクターをミニプログラムとして考えてください。」

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

Artigos sobre CSS que explodiram minha cabeça em 4

条件付きCSS by Ahmad Shadeed

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

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

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

Artigos sobre CSS que explodiram minha cabeça em 4

CSS カスケード by Amelia Wattenberger

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

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

Artigos sobre CSS que explodiram minha cabeça em 4

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

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

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

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

Artigos sobre CSS que explodiram minha cabeça em 4

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

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

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

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

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

Artigos sobre CSS que explodiram minha cabeça em 4

レスポンシブ Web デザイン

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

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