【CSS】カスケーディングとは何か？インラインスタイル、!importantの優先順位やセレクタでタグ名とクラス名を指定した場合にどちらのスタイルが適用されるか？

CSS・SCSS

2023/12/3

記事内に広告が含まれていることがあります。

CSSにはカスケーディングという考え方があります。

CSSのカスケーディングを考えないと、スタイルを適用したはずなのに狙ったスタイルが適用されないということが頻発します。

ここでは、CSSのカスケーディングとは何かについて解説しています。

カスケーディングとは何か？

CSSにおけるカスケーディングとは、ある要素に対して、複数のスタイル処理を指定した場合に、どの処理を優先して適用するかの順序です。

英語ではCascadingと書き、Cascade（カスケード）の進行形になっています。

Cascade（カスケード）とは滝が幾段にも重なった状態を表しています。

CSSでは、滝のように段々とスタイルを適用させていくイメージになぞらえています。

point

カスケーディングとはスタイルを適用する優先順位のこと。

CSSのカスケーディング、すなわちスタイル適用の優先順位は大きく次の２つに分類することができます。

スタイル適用の優先順位

CSSファイルの中では、下側に記述されている処理ほど、スタイル適用の優先順位が上がります。

このため、SASSの@import機能で他のCSSファイルを読み込むときに、上側で読み込んだファイルで指定しているプロパティと、後から読み込んだファイルで指定しているプロパティに同じ記述があった場合、後から読み込んでいるスタイルが優先されます。

例えば、以下のようにクラス名「red-color」と「blue-color」がついたdivタグがあるとします。

<p class="red-color blue-color">ダミーテキスト</p>

これに対して、それぞれのクラスを指定してCSSを記述したとします。

.red-color{
  color: red;
  background-color: yellow;  
}

.blue-color{
  color: blue;
}

ブラウザの表示は以下のようになります。

指定したpタグに適用されるのは、下側に記述した「blue-color」の処理が優先的になり、上側の「red-color」のプロパティの値は上書きされます。

なお、「background-color」のように、他に処理が出てこない場合は上書きは発生しません。

例えば、@importを使って、以下のように「fundation/_base.scss」と「layout/_footer.scss」ファイルの2つを「app.scss」というファイルの中で読み込んだとします。

@import "foundation/_base";
@import "layout/_footer";

すると、app.scssの中にはファイルを読み込んだ順番に、そのファイルの内容が入ります。

このため、後から読み込んでいる「layout/_footer.scss」の中に、「fundation/_base.scss」と重複する指定があると、後から読み込んだファイルの内容で上書きが発生してしまいます。

point

ファイルを読み込む順番が大切。スタイル適用の優先度が低いファイルから読み込んでいく。

CSSではスタイル適用の処理を各順番以外にも、どのセレクタや書き方を使うかで適用の優先順位が変わります。

例えば、aタグに直接スタイルを指定したものよりも、a:linkのように疑似クラスを使った処理の方が優先されます。

このため、a:linkの中に重複するプロパティがあれば、その値で処理を上書きします。

さらに、タグの種類よりも、クラスで指定したり、id名で指定する方が優先度は強くなります。

セレクタとは異なりますが、更に上の優先度になるのが、HTML上に直接スタイルを記述するインラインスタイルです。

そして最強なのがプロパティの後ろに「!important」を宣言する書き方です。

このため、CSS/SASSファイルの読み込み順序や書き方がカオスになっていると、スタイルの強制適用を表す「!important」の記述が乱用されることになります。（非常にメンテ性が低い状態です）

なお、FLOCSSではLayoutレイヤーのみid名を使ったidセレクタ（#セレクタ名）の使用が許可されています。その他のレイヤーではクラス名を使ったクラスセレクタを使用します。

各セレクタや記述の優先度をまとめると以下のようになります。

適用の優先度	セレクタや適用の種類	処理の例
6	!important宣言	color: red !important;
5	インライン（style属性）	style=”color: red;”
4	IDセレクタ	#hoge
3	クラスセレクタ	.hoge
3	属性セレクタ	a[href=”https://example.org”]{color: red;}
3	擬似クラス	button:hover {color: red;}
2	疑似要素	p::first-line {color: red;}
2	要素セレクタ	p {color: red;}
1	ユニバーサルセレクタ	* {color: red;}