【5分で学習】CSSについて誰も教えてくれなかったこと。

  • ブックマーク
  • -
    コピー

 これはCSSについて個人的なリサーチで学んだことについての記録であり、誰かを批判しているわけではありません。

 近年では、多くの開発者がCSSをそれほど気にしていないように見えます。目新しいことではありません。使えて当たり前、というか、あまり議題に上がることもないですからね。

大将

おれ自身も、あまりCSSをガッツリ触る機会が多いわけではないですから。

 コミュニティに属して、周囲からそれなりに学んでCSSを実装していく。初心者もHTMLとCSSはまず最初に取り掛かる内容だと思いますが、それゆえに、実は大事だけど、誰もそこまで深く学習をしてないことがたくさんあるのではないかと思いました。

 この記事に記すことはその全てではありませんが、それが誰かの役に立つのなら光栄です。

大将

CSS以前にweb開発とはなにか? 今すぐ理解したい方はこちらをまず閲覧ください!

Terminology(専門用語)

 どのプログラミング言語においても、それぞれを表す専門的な言葉がありますよね。これがまた覚えにくいこと……

 CSSも同様です。コミュニケーションを円滑にしたり、知識を深めるために、用語を学ぶことも重要ですね。 

Descendant combinator(子孫結合子 )

 これは通常、単一の空白文字 ( ) で表されるものです。
 スタイルのセレクター間にある空白です。奴には子孫結合子という名前があるんです。

ul li {
color: red;
}

この、ulliの間の空白です!

Layout、Paint、Composit

 これらの用語は、ブラウザのレンダリングと関係があります。

1. Layout

 レイアウトは、必要な空白の計算です。デザインは空白が全てと言っても過言ではありません。CSSの「layout」プロパティ(幅、高さなど)を変更すると、ブラウザは他のすべての要素をチェックしてページを「リフロー」する必要があります。つまり、レイアウトの変更によって、ブラウザは影響を受ける全ての要素を再描写する必要があるのです。

2. Paint

 これは、要素のすべての視覚部分(色、境界線など)のピクセルを塗りつぶす処理です。 要素の描画は通常、複数のレイヤーで行われます。
「paint」プロパティを変更してもページのレイアウトには影響しないので、ブラウザはレイアウト処理をスキップしますが、ペイントは行われます。

3. Composite

 composit(合成)は、ブラウザが正しい順序でレイヤーを描画するよ、ということです。 一部の要素は互いにオーバーラップする(重なり合う)可能性があるため、要素が意図した順序で表示されなければなりません。
 レイアウトもペイントも必要としないCSSプロパティを変更した場合、ブラウザはcompositを行うだけになります。

CSSのパフォーマンス

 子孫セレクターは、もう少し複雑かもしれないですね。
 アプリケーションによっては、より具体性のない子孫セレクターのみを使用すると、コストがかかる可能性があります。 というのも、親要素と子要素に関係が制限されていないため、ブラウザはすべての子孫要素が一致するかどうかをチェックしてしまいます。その分時間がかかるということですね。
 例えば:

#nav a {
background-color: pink;
}

 この場合、ブラウザは、実際に#navセクション内にあるリンクに辿り着く前に、ページ上のすべてのリンクを確認しにいきます。
 そのため、これを改善してよりパフォーマンスの高い方法を取るなら、
#nav要素内の各<a>.navigation-linkの特定のセレクターを追加しましょう。
 ブラウザはセレクタを右から左に読み取ります

 これって本質的で超大事なことだと思いますが、意外と知らなかったり、気にしない人が多い。
 例えば、

.container ul li a {
color: blue;
}

 手順は次のとおりです。

  • ページ上のすべての<a>にマッチする。
  • <li>に含まれる<a>を検索する。
  • これらの一致を使用して、<ul>に含まれているものに絞り込みます。
  • 最後に、上記の選択を、クラス.containerを持つ要素に含まれているものに絞り込みます。

 これを見ると、セレクターが具体的であるほど、ブラウザーがCSSプロパティをフィルター処理するのが効率的になることがわかりますね。

 上記の例のパフォーマンスを向上させるために、.container ul lia<a>タグ自体に.container-link-styleのようなものを追加することで置き換えることができます。

可能な限りレイアウトの変更を避ける

 一部のCSSプロパティを変更するには、レイアウト全体を更新する必要出てきます。
例えば、width、height、top、leftなどのプロパティの変更(更新)では、レイアウト全体を計算し、レンダーツリーを更新する必要があります。
 そのため、多くの要素でこれらのプロパティを変更すると、それらの位置/寸法を計算して更新するのに長い時間がかかってしまうのです。

ペイントの複雑さに注意を払う


 一部のCSSプロパティ(例:ぼかし)には、同じ効果でも他のものよりコストかかるものがあります。つまり、同じデザインを達成するために、他により良い方法があるかどうかについて考えてみましょう。

高価なCSSプロパティ

 上記に述べたように、一部のCSSプロパティは、他のプロパティよりも高価です。 つまり、ペイント処理に時間がかかるということです。
 例えば、

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

 これらは高価なプロパティです。これらを絶対使用すべきではないということではありませんが、これらの要素を何百回もレンダリングする場合、レンダリングパフォーマンスに影響を与えることを頭に入れておきましょう。

順番

 CSSファイルの順番は超大事です。
 以下のCSSを見ると、

.red { color: red }
.blue {color: blue}

そして、HTMLはというと、

<div class="blue red">ここはくなります</div>
<div class="red blue">ここはくなります</div>

 これ、パッと理解できますか?

 HTMLでのセレクターの順序は重要ではなく、CSSファイルでのセレクターの順序が重要なのです。
 CSSのパフォーマンスを評価する良い方法として、ブラウザの開発者ツール(developer tool)を使用することがあげられます。SUNABACOプログラミングスクールでも教えてますね!

References:

  • ブックマーク
  • -
    コピー

この記事を書いた人

大将

大将

エストニアの国立大学、タリン工科大学在学中に現地案内事業で起業。大学院では文学の数値解析の研究と小型人工衛星研究開発チームに所属。データサイエンティストとしてさまざまなプロジェクトに関わり、現在はフロントエンドの開発やVR教育やVR美術館などの創作や事業を行っている。元テニスコーチ。