# CSSの詳細度とは？
CSSの詳細度とは、ブラウザが特定の要素にどのプロパティ値を適用するかを決定するアルゴリズムです。ルールが「どれだけ具体的か」をブラウザに伝える数値スコアと言えます。2つのルールの詳細度が異なる場合、書かれた順序に関係なく、重みが大きい方が優先されます。同じ重みの場合は、ソースコードで後に宣言された方が優先されます。# CSSの詳細度の計算方法
詳細度は3つのカテゴリに基づいて計算され、(A, B, C) という3列の重みとして表されます：- 列A（ID）：一意の識別子の数を数えます。例：
#headerは列Aで1としてカウントされます。 - 列B（クラス、属性、擬似クラス）：すべてのクラス（
.button）、属性（[type="text"]）、擬似クラス（:hover）を数えます。 - 列C（要素、擬似要素）：すべてのHTML要素（
div、h1）と擬似要素（::before）を数えます。
# 黄金律：列をまたいだ繰り上がりはない
詳細度が (0,50,0) のルールは、(1,0,0) のルールより絶対に強くなりません。IDひとつがクラスをいくつ積み重ねても勝ちます。列間に繰り上がりは存在しません。
# !important の問題とBEMアーキテクチャ
!important は詳細度ルールの例外です。使用すると、その宣言が他のどんなルールよりも自動的に優先されます。自然なカスケードを壊すため、悪い習慣とされています。大規模プロジェクトでの詳細度の衝突を避けるために、BEM のような手法では1段階のクラスセレクターのみを使うことを推奨し、詳細度を (0,1,0) のフラットな状態に保ちます。