SUNABACO 
CSSは簡単なようで難しい言語ですよね…
コミュニティに属して、周囲からそれなりに学んでCSSを実装していく。初心者もHTMLとCSSはまず最初に取り掛かる内容だと思いますが、それゆえに、実は大事だけど、誰もそこまで深く学習をしてないことがたくさんあるのではないかと思いました。
この記事に記すことはその全てではありませんが、それが誰かの役に立つのなら光栄です。
CSS以前にweb開発とはなにか？ 今すぐ理解したい方はこちらをまず閲覧ください！
Terminology（専門用語）
どのプログラミング言語においても、それぞれを表す専門的な言葉がありますよね。これがまた覚えにくいこと……
CSSも同様です。コミュニケーションを円滑にしたり、知識を深めるために、用語を学ぶことも重要ですね。
Descendant combinator（子孫結合子 ）
これは通常、単一の空白文字 ( ) で表されるものです。
スタイルのセレクター間にある空白です。奴には子孫結合子という名前があるんです。
ul li {
color: red;
}
この、ulとliの間の空白です！
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:
https://medium.com/@devdevcharlie/things-nobody-ever-taught-me-about-css-5d16be8d5d0e
https://github.com/wilsonpage/fastdom
まとめ
CSSって一見簡単でシンプルな言語に見えますが、実は奥が深いですよね…SUNABACOではそんなCSSが学べます！
SUNABACOプログラミングスクールでは2カ月間で徹底的にプログラミングやデザインを学びます！
またSUNABACOの特徴でもあるのがプログラミングだけを学ぶのが目的でなく、プログラミングを使って人に価値を提供する、世の中にある困りごとをどのように解決するかを学ぶスクールです