UnsplashのJantine Durnbosによる写真



これは決して同僚の批判ではなく、私自身が最近CSSについて学んだ重要なことの短いリストです。



多くの開発者がCSSについて考えていないように見えることは秘密ではありません。 これは、インターネットでの議論や、友人や同僚との会話から簡単に気付くことができます。 それでも、同僚から正確に多くの知識を得ることができます。また、重要なCSSのニュアンスについて誰も私に話してくれないことを理解することがあります。



これを修正するために、私はいくつかの調査を行い、CSSをよりよく理解して書くために興味深く有用な概念の短いリストをまとめました。



このリストは完全に完全ではありません。 ここには、ここ数日間で学んだ新しいことと共有したいことだけが含まれています。突然、他の人の助けになります。

用語

プログラミング言語と同様に、特定の用語は概念を説明するために使用されます。 プログラミング言語であるCSSは、例外ではありません。したがって、コミュニケーションを簡素化し、個人的な開発のためだけに、いくつかの用語を学ぶことが重要です。

子孫コンビネーター

あなたのスタイルのセレクター間のギャップを見ましたか？ 実際には、名前があり、子孫のコンビネータです。





子孫コンビネーター

レイアウト、レンダリング、構成

これらの用語はブラウザでのレンダリングに関連していますが、CSSプロパティの一部はレンダリングパイプラインのさまざまなステップに影響するため、重要です。

1.レイアウト

レイアウトステップは、要素が画面上で占めるスペースの計算です。 CSSの「レイアウト」プロパティ（幅、高さなど）を変更すると、ブラウザーは他のすべての要素をチェックしてページを再描画する必要があります。つまり、影響を受ける領域を再描画してそれらをオーバーラップします。

2.描画（ペイント）

このプロセスは、要素のすべての視覚部分（色、境界線など）をピクセルで塗りつぶします。 通常、要素は複数のレイヤーに描画されます。



'paint'プロパティを変更してもレイアウトには影響しないため、ブラウザーはレイアウトステップをスキップしますが、レンダリングは実行します。



多くの場合、レンダリングにはレンダリングに最も時間がかかります。

3.コンポジション（複合）

コンポジションは、ブラウザがレイヤーを正しい順序で描画するステップです。 一部の要素は重複する可能性があるため、この時点で、ブラウザーは要素が指定された順序で表示されることを確認します。



CSSプロパティを変更すると、レイアウトにもレンダリングにも影響しませんが、ブラウザーは構成を行うだけで済みます。



さまざまなCSSプロパティをトリガーするプロセスの詳細については、 CSSトリガーを参照してください。

CSSのパフォーマンス

子孫セレクターは高価になることがあります

アプリケーションのサイズに応じて、特定の指示なしで子孫セレクターのみを使用すると、リソースに大きな打撃を与える可能性があります。 関係は親要素と子要素に限定されないため、ブラウザは子孫の各要素への準拠をチェックします。



例：





子孫セレクターの例



ブラウザは、 #nav



セクション内のリンクに#nav



前に、ページ上のすべてのリンクを評価する必要があります。



より効率的な方法は、特定の.navigation-link



セレクターを#nav



セクション内の各<a>



リンクに追加することです。

ブラウザーはセレクターを右から左に読み取ります

以前はこの重要なことを知っていたはずですが、知りませんでした... CSSを解析するとき、ブラウザーはセレクターを右から左に解析します。



次の例を考えてみましょう。





ブラウザは右から左に読みます



手順：

• ページ上のすべての<a>
  
  
  
  に一致します。
  
  
• <li>
  
  
  
  含まれるすべての<a>
  
  
  
  見つけます。
  
  
• マッチを取得し、それらを<ul>
  
  
  
  内のものに絞り込みます。
  
  
• 最後に、上記の選択を、 .container
  
  
  
  クラスの要素に含まれるものにフィルターします。

これらの手順を見ると、適切なセレクタが具体的であるほど、ブラウザがCSSプロパティをより効率的にフィルタリングおよび適用できることがわかります。



上記の例のパフォーマンスを改善するには、 .container ul li a



を<a>



タグ自体に.container-link-style



ようなものを追加することで置き換えます。

可能であれば、レイアウトを変更しないでください。

一部のCSSプロパティを変更するには、レイアウト全体を更新する必要があります。



たとえば、 width



、 height



、 top



、 left



の幾何学的プロパティでは、レイアウトの再計算とレンダリングツリーの更新left



必要です。



多くの要素でこれらのプロパティを変更すると、位置/サイズの計算と更新に時間がかかります。

レンダリングの複雑さに注意してください

一部のCSSプロパティ（ぼかしなど）は、レンダリングに関しては他のプロパティよりも高価です。 同じ結果を達成するためのより効果的な方法を考えてください。

高価なCSSプロパティ

一部のCSSプロパティは他のプロパティよりも高価です。 これは、レンダリングに時間がかかることを意味します。



高価なプロパティの一部：

• border-radius
  
  
  
  
• box-shadow
  
  
  
  
• filter
  
  
  
  
• :nth-child
  
  
  
  
• position: fixed
  
  
  
  

これは、まったく使用できないという意味ではありませんが、要素がこれらのプロパティの一部を使用し、何百回もレンダリングされると、パフォーマンスに影響することを理解する必要があります。

ご注文

注文事項

そのようなCSSを見てみましょう：







そして、HTMLコードを見てください：







HTMLのセレクターの順序は重要ではありませんが、CSSでは重要です。

---

CSSのパフォーマンスを評価する良い方法は、ブラウザーで開発者ツールを使用することです。



ChromeまたはFirefoxでは、開発者ツールを開き、[パフォーマンス]タブに移動して、ページを読み込んだり操作したりしたときの動作を記録できます。





Chromeのパフォーマンスタブのスクリーンショット

資源

この記事のトピックを調べてみると、以下にリストされている非常に興味深いツールに出会いました。



CSS Triggersは、CSSの機能とそのパフォーマンスへの影響をリストしたWebサイトです。



Uncssは、CSSから未使用のスタイルを削除するツールです。



Css-explainは、CSSセレクターを説明する小さなツールです。



Fastdomは、レイアウトパフォーマンスを高速化するDOMバッチ読み取り/書き込みツールです。



今のところすべてです！ これが理にかなっていることを願っています！