こんちはbasara669です！
CSSがうまく当たらなくて困る時があると思います。どういう順序でCSSは適用されるのか、どう解釈されているのか。この辺りはW3Cで優先度が決めているので紹介します。
W3Cはどう考えているか？
W3CではこのCSSの定義について下記のように定義されています。
まぁ、いきなり仕様を見てもわからないと思うので、解説してこうと思います。
詳細度とは
あるHTML要素にどのCSSが当たっているのか、特定しているかというのをW3Cは定義をしています。日本語だと詳細度とか特定度とかで翻訳されている詳細度のですが、このブログの中では詳細度と呼びます。
この詳細度が高い程、CSSが優先して適用されます。
詳細度の計算方法
では、この詳細度はどのように算定されるでしょうか。この計算方法もW3Cで定義されてます。
詳細度にはa~dのランクがあり、aが最も優先され、dが一番ランクが低いです。1つ上のランクが1でもあれば、1つ上のランクが適用されます。
例えば、dが10のCSSとcが1のCSSがあった場合、cが1のCSSの方が適用されます。
各ランクはこんな感じです。
- aランク：インラインCSS
- bランク：IDによる特定
- cランク：classによる特定
- dランク：要素名による特定
何となく前述の説明だと難しい感じがするとは思いますが、書いてあることはこれまで書いているCSSの感覚となんら変わらないと思います。
具体的な計算結果
言葉だけではわかりづらいと思うので具体例を書きます。
[css] a{} /*a=0 b=0 c=0 d=1*/ul li a{} /*a=0 b=0 c=0 d=3*/
.red{} /*a=0 b=0 c=1 d=0*/
.main ul li a.red{} /*a=0 b=0 c=2 d=3*/
#red{} /*a=0 b=1 c=0 d=0*/
style="" /*a=1 b=0 c=0 d=0*/
[/css]
上の方が優先度が低く、下に行くほど高いです。
こんな感じで上位のランクのものがあれば、そちらが優先をされます。
コーディングで考えるとき
これらの詳細度を意識するとより少ないセレクタ量で適切にCSSを当てることが出来ます。
セレクタの量が少なければ少ないほどサイトのパフォーマンスも上がりますし、可読性もあがります。
インラインでCSSを書くと、SEO的にも良くないと言われますが、CSS的にも良くないというのがわかると思います。
basara669の感想
「ここまで厳密に考えてお前はコーディングしてるのか！？」とか言われた、全くそんなことは無いのですが、これらのことを知って書くのと知らないで書くのではそれなりに違うので、知っておくことは大切です。
本だけとかでCSSを勉強するとここらへんの効率性的な情報は取得しづらかったりするので書いてみました。
コメントを残す