はじめに

HTMLでマークアップした要素に対してCSSを適用させようとすると、CSSがうまく適用されなくてデザインが反映されないという状況に陥ったので原因を調べているとどうやらスタイルの適応の優先順位が関係しているということがわかったので記録を残すことにしました。

!important
CSSのプロパティに!importantが指定された場合、そのスタイルが最優先されます。ただし、多用しすぎるとコードの保守性が悪くなるため使いすぎ注意

<h1 id="example">優先順位</h1>

/* プロパティに!importantを指定しているためh1タグのスタイルが適用 */
h1 {
    color: blue !important;
}

#example {
    color: red;
}

スタイルの指定場所
同じセレクタが複数の場所で指定された場合は、後に指定されたスタイルが適用される

<h1>優先順位</h1>

/* 後に指定されたh1タグのプロパティredがスタイルが適用 */
h1 {
    color: blue
}

h1 {
    color: red
}

インラインスタイル
HTML要素のstyle属性で直接指定されたスタイルは他のスタイルよりも優先される。ただしメンテナンスが低下するため避けるべき
```
<p style="color:red;">インラインスタイル</p>
```

IDセレクタ
IDセレクタはクラスセレクタよりも優先されるが再利用性が低い

<h1 id="example" class="example-title">Hello World!!</h1>

/* IDセレクタのプロパティbuleのスタイルが適用 */
#example {
    color: bule;
}

.example-title {
    color: red;
}

スタイル適用の優先順位を理解することで意図したデザインが正しく表示されることだけではなくコードの保守性、パフォーマンスの向上など生産性を高めるより高品質なデザインを実装することが可能