【脱!important】保守性を意識したスタイルを確実に上書きするためのテクニック

TAK(@tak_dcxi)です。今回もCSS設計に関する投稿です。 皆様はWebサイトの運用でCSSを更新・改修する際に、既存のスタイルが上書きできなくて苦しんだことはありませんか？ class名のタイポミスだったり、そもそも指定したセレクタに対応する要素が無い…といった凡ミスも原因だったりはしますが、大抵の場合他のスタイル指定が強くて上書きできない、つまり「詳細度」が影響していることが多いです。 CSSを破綻させる原因の一つの「詳細度」とは？ MDNの説明を引用すると以下の通り。 詳細度は、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの CSS セレクターで構成される一致規則に基づいています。 CSSのスタイル指定が競合した時に優先される、セレクタが生まれながらに持つ「強さ」みたいなものです。 全称セレク

[yarumato]

“CSS詳細度（優先順位）を0.1.0になるようにキープして、CSSの書き順に気をつければ保守性が向上する。Specificity Calculatorで計算”

[d4-1977]

「idにスタイルを指定する必要がある時は、idセレクタを使うのではなく属性セレクタに変換して指定」ナルホド！設計をしておくことで、!important👮🏻‍♂️が誕生することにならないようにしたい

[klim0824]

バッドノウハウ感満載