CSSの強度判定（書いたのに効かない時に読む記事）
エンジニア・デザイナーがいるチームでマークアップエンジニアがいない時にCSSを伝えるための記事です。これからマークアップがんばるぞ！って方にも！
CSSの強度判定とは、CSSに書かれた効果（colorとかmarginとか）がブラウザ現れる時の優先度の例え話です。
強度の決め方は大きく分けて2つです。
1.CSSの順番
2.CSSのチカラ
1.CSSの順番
CSSは、より後に書かれた内容が優勢です。
ブラウザがCSSを読み込む順番を意識してください。
CSSは同じ指定をいくらでもでも上書きできるため、どの指定が画面に反映されているのか分からなくなりがちです...CSSを書く場所は一般的に以下の3つ。
<head>内に<style>で直接書く
<head>
<style>
<!--
hoge{ color: red; }
-->
</style>
</head><head>内に<link>で別ファイルを参照する
<head>
<link rel="stylesheet" href="hoge.css">
</head>
＊ hoge.css内の記述は hoge{ color: yellow; }
<body>内の要素にstyleで直接書く
<div class="hoge" style="color: blue;">
hoge
</div>ブラウザはソースコードの上から読んでいくので、この順番で画面に適応され、同じclassなどへの指定は上書きされます。
上記の例の場合は、最後に読み込まれるcolor: blue;が生存します。
2.CSSのチカラ
CSSはポイントをより多く稼ぐ書き方が優勢です。
ただし、継承を意識して書いて行かないと、破綻しがちです。
CSSのチカラはポイントでよく例えられます。（ポケGOでいうとこのCP）
ポイント（P）は書き方によって付与されます。
/* HTMLタグは1P */
div{}
/* classは1P */
.hoge{}
/* IDは10P */
#hoge{}
/* importantは10,000P */
.hoge{ color: red !important; }
/* 組み合わせるとポイントは加算され、この場合は2P */
.hoge .in-hoge{}ポイントは強ければ強いほど画面に反映されやすいのでCSS初心者はタグやclassをたくさん組み合わせたり、!important無双しがち。
でも、強い力を無闇に与えてしまうと、限定的な画面で上書きをしたい時にとても困ります。（DBのようなインフラの嵐）
!importantはチートすぎるのでいざっていう時まで取っておく。
CSSの優劣のつきかた
例題
<div id="hogeC" class="hogeA hogeB">
.hogeA{ color: red; }
.hogeB{ color: yellow !important; }
div#hogeC{ color: blue; }この場合の解釈
div#hogeC（2P）からhogeB(10,000P)へ攻撃！（攻撃：11P）
判定→div#hogeCは先制攻撃は取れて2P削ったものの、hogeBの防御力が強すぎて返り討ちになる（0P) → div#hogeCの死
hogeB(10,000P)からhogeA（1P）へ攻撃
判定→余裕でhogeBの勝利
例題の場合は.hogeB{ color: yellow !important; }が優先される
まとめ
CSSは順番とチカラを意識して書くと、「書いてるのに効かない」や「とりあえず!important」などの迷子にならず運用することができます。
「力が欲しいか……。力が欲しいか！力が欲しいのならくれてやろう！！」
引用：ARMS（皆川亮二/ 七月鏡一著：発行小学館）
でも、チカラの使い方は計画的に。
この記事が気に入ったらサポートをしてみませんか？