例外的な詳細度の算出CSSの詳細度にはいくつかの例外があります。!importantとstyle属性です。CSSの詳細度は基本的にはセレクタで決まりますが、!importantにおいてはプロパティと値(宣言)ごとの単位で決まります。style属性はCSSやstyle要素中ではなくHTMLの各要素に属性として書き込みます。JavaScriptで要素の属性を書き換えることで、適用されるスタイルを変化させるのはこのためです。宣言に!importantがあればx=1style属性(style="")内に書き込まれた宣言であればy=1として、x-y-a-b-cの値の大きさで詳細度を導き出すことが出来ます。!importantはセレクタではなく宣言(プロパティと値)ごとに、style属性を使う場合はセレクタは使えないことに留意してください。-->詳細度を適切に取り扱うためにCSSの詳細度はここまで述べてきたようになかなかに算出が面倒です。この複雑さに対処するためにはどうすればよいのでしょうか。1つはCSS設計などを駆使して複雑さを生じさせないこと、もう1つは詳細度を上書きしていき複雑さに真正面から立ち向かっていくものです。後者は多くの場合ますます事態を深刻にしますが破滅的で楽しいです。詳細度に悩まされないためには第一にCSSを適切に設計することです。Metodologyはその理想形の1つでしょう。ルールセットの並び順だけで適用されるスタイルが決定するため、詳細度を意識する必要はありません。SMACSSなどを参考にカテゴリーごとにCSSを整理、IDの適当な使い方を意識することでも問題を軽減できるでしょう。必要以上に詳しいセレクタを使わない」とまとめています。事後処理CSS設計し忘れた、CSS設計が破綻したなどどうしても詳細度の問題で思ったようにスタイルを適用できない場合には、より高い詳細度のセレクタを使って上書きしていくしかありません。今回は詳細度をうまくハックする方法を紹介します。ザ・ダークサイド・オブ・詳細度さて、CSS上書きと聞くと!importantの使用を思いつく人が多いのではないでしょうか。!importantは最も事後処理に使うべきではありません。cascadeできない(それ以上重ねられない)詳細度がセレクタ準拠ではなく宣言準拠になる打ち消しづらいなどの問題があるからです。!importantの他に思いつくのはHTMLに適宜手を加え、要素に妥当なidを加えることによる詳細度の調整やCSSの全面的なリファクタリングでしょうか。いずれもとてもダルいです。ここでは!importantを使わずにCSSをちょこっといじるだけで詳細度に雑に立ち向かえる方法を紹介していきます。:-)idじゃなくて属性セレクタを使うidセレクタ(#id)の代わりにid属性を活かして属性セレクタを使う方法です。idの詳細度を弱めたい場合には最適ではないでしょうか。idセレクタで簡単に書けるところを少々冗長に書くのでCSSが少し汚くなります。color:blue;}セレクタを重ね(連結し)まくる多くのセレクタは重ねて使うことで、その詳細度を高めます。これを使うとCSSの詳細度を管理するのが非常に難しくなります。一度ハマるとおそらく正常に詳細度を使うことはできなくなるでしょう。.content{color:blue;}:not()を重ね(連結し)まくるいちばん好きな方法です。:not()、否定擬似クラスはそれ自身に詳細度は存在せず、()内のセレクタの詳細度を適用する点を活かしたものです。詳細度を高めたいセレクタに:not()否定擬似クラスをつけ、中身を適当なidセレクタなどにして、それを重ねておけば完了です。HTMLに特段編集がいらず、idセレクタだろうがなんだろうが無視してえいやっと適当に作れるので重宝します。CSSが最高に汚くなります。*/article:not(#id):not(#id):not(#id):not(#id){font-size:100rem;}まとめ先述したような詳細度ハックはもちろん冗談です。CSSの可読性を著しく損なうため通常行うべきではありません。詳細度に事後対処するというのは多くの場合破綻につながるのみです。こんなことにならないように詳細度をきちんと意識して皆さんもいい感じにCSS設計しましょう。Calendarの16日目の記事です。記事に不正確な点などあれば教えてくださると幸いです。この記事は編集途中のものを公開したので至らない点が多くありますが少しずつでも書き直していく所存ですのでアドバイスをいただけると幸いです。読者になる検索リンクはてなブログブログをはじめる週刊はてなブログはてなブログPro最新記事2016年振り返りCSSの詳細度を雑に上書きする月別アーカイブはてなブログをはじめよう!sys9kdrさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。