詳細度
割と良い
詳細度のアルゴリズムは、3種類のselectorで決定する
ID
1-0-0 を追加
e.g. #id
CLASS
0-1-0 を追加
e.g. .class , :first-child , [type=password
TYPE
0-0-1 を追加
e.g. h1 , ::before
値なし
詳細度に影響を与えない
0-0-0 を追加
!important やinline CSSは仕様的には、詳細度とは関係のない概念
詳細度はその中の1要素
ID-CLASS-TYPE と同じモデルで表記したら、
inline CSSは、 1-0-0-0
!important は、 1-0-0-0-0
っぽくなるよってだけで、厳密な話ではない
css#myApp [id="myElement"] {
color: green; /* 1-1-0 - 勝ち!! */
}
#myElement {
color: yellow; /* 1-0-0 */
}
.bodyClass .sectionClass .parentClass {
color: yellow; /* 0-3-0 */
}
参考
詳細度とパフォーマンス