スタイルシートを的確に指定しよう

ページのレイアウトやデザインを細かく指定出来るスタイルシート。
もはやこれなくしては、見栄えの良いページは作れません。

『良いページを作りましょう！』
カッコいいページの方が売れます！
そんな事を言いつつ、スタイルシートを結構シビアに制限している大手ECサイトの管理機能は、ちょっと矛盾してるよなぁとか思います。

スタイルシートの優先順位

スタイルシートには『このスタイルよりもこっちのスタイルの方がえらい』みたいな優先順位があります。

詳しい内容はこちらに書いてあります。
Assigning property values, Cascading, and Inheritance

簡単に言うと指定しているスタイルを総得点が高いやつを採用みたいな感じですね。
どこも縦社会って事ですね！

優先順位がまったく同じ場合は後書き優先

全く同じ指定の場合は、後にかかれたスタイルシートが優先されます。

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”qbbVzZ” default_tab=”css” user=”Regless”]See the Pen スタイルシートの優先順位(タイプセレクタ) by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

少しでも点数がずれる場合は、後書きとか関係なく点数が高い方が適用されます。

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”xZZpOO” default_tab=”css” user=”Regless”]See the Pen xZZpOO by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

この場合は？

では下のような場合ではどれが適用されるでしょうか？
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”MKKrjN” default_tab=”css” user=”Regless”]See the Pen スタイルシートの優先順位。 by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

わかりましたか？
加点詳細はコチラです。

[css]
#wrap p{ color: green; } /* 100 + 1 = 101 */

#wrap .text{ color: yellow; } /* 100 + 10 = 110 */

div#wrap .text{ color: blue; } /* 1 + 100 + 10 = 111 (Win!) */

#wrap .text{ color: silver; } /* 100 + 10 = 110 */

p.text{ color: gray; } /* 1 + 10 = 11 */

p { color: black; } /* 1 = 1 */
[/css]

この仕組みをうまく使えば、無駄な入れ子や不要なセレクタを綺麗に整理して管理もしやすいスタイルシートが組めます。
綺麗に整理されればその分ファイルも軽くなるので、読み込み速度も早くなり、良い事づくめです！

優先順位の例外

絶対王者『!important』

但し、ごにょごにょとやっていた点数を全て無に帰してしまう絶対王者が居ます。
それが!importantです。

これを付けるだけで、何をどれだけやろうが、この指定が最優先されます。待ったなしです。
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”jWWYyR” default_tab=”css” user=”Regless”]See the Pen important指定 by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

まとめ

今までは全然気にせず、トップレベルから順に入れて細かくスタイルシートを組み上げていたのですが、非常に管理性が悪く、困っていたところこういう仕組みを知りました。

仕組みをうまく利用して、例えば汎用的に使う場合のスタイルの指定や、限定的に使う場面での指定等、用途によって書き方を変えるのが一番管理のしやすく効率の良い表記になると思います！