scss(css)のプロパティ適用の優先度をセルフ検証してみた

どうもaono1234と申します。記事がいいなと思ったらtwitterのフォローもお待ちしております‼
https://twitter.com/takeshi_program

お疲れ様です❗❗
今日はscss(css)のプロパティ優先度についての検証記事となります。😄
拙い文章ですが、良かったらご覧ください❗❗

0.記事を書くきっかけ

scssファイルでスタイル実装をしている際、コードを書いている場所やセレクタによっては反映されないということが何度もありました。
「時間を掛けたのに、実装できたのこれだけ？😥」というのが何日も続いたので優先度について深堀しました。

scssについてまだ把握不足感は否めませんがが、【プロパティの優先度】についてわかる所まで検証したので、共有させて頂きます。

1. はじめに

本記事は以下の読者が対象です。

• プログラミング初心者
• cssを知っている人
• scssを知っている人

2. 先に結論

1. 基本優先度はセレクタの種類>セレクタの詳細度>コードが記載される箇所

2. 場合によっては1.のルールに当てはまらない場合がある

3. scssを追加コーディングする際は既存コードの構造を把握した上で追加しよう

3. 優先度って何？

html構造が以下の場合、

元ファイル

<div class = "test1" id = "test1">
  <div class = "test2" id = "test2">
    <p  class = "message" id = "message">hello world</p>
  </div>
</div>

scssを↓このように書いたとします。

example1

//スタイル1
.test2{
  .message{
    background-color: red;
  }
}

//スタイル2
.message{
  background-color: yellow;
}

スタイル1、スタイル2はどちらも.messageクラスの背景色を変えるコードです。
さて、どちらのスタイルが適用されますか？
これを私は「優先度」と呼んでおります。

ちなみに、このコードはスタイル1が優先されます。

3. 優先度を決めるファクター

どちらのプロパティの優先度が高いか、私の知る限り3つのファクターが存在していると考えます。

1. セレクタの種類

2. セレクタの詳細度

3. コードが記載される箇所

それぞれ紹介します。

3.1セレクタの種類

「1.セレクタの種類」についてはこのWEBサイトに分かりやすく解説があったので参考にしてください。

https://webst8.com/blog/css-selector-priority/

3.2セレクタの詳細度

scssでは同じ.messageにプロパティをあてることができため、

example1

//スタイル1
.test2{
  .message{
    background-color: red;
  }
}

//スタイル2
.message{
  background-color: yellow;
}

のような書き方ができます。
スタイル1は
「.test2クラスの中の要素の.messageクラスのbackground-colorプロパティをredにしてね」👩

スタイル2は
「.messageクラスのbackground-colorプロパティをyellowにしてね」👳‍♂️

という内容のコードです。
このコードの優先度は、より詳細に.messageの場所を伝えてくれているスタイル1👩の方が高くなるため、スタイル1のbackground-colorプロパティが適用されます。

3.3コードが記載されている箇所

この場合はどうでしょうか？

example2

//スタイル3
.message{
  background-color: red;
}
//スタイル4
.message{
  background-color: yellow;
}

どちらも、同じセレクタで詳細度も同じです。

基本的にプログラミングは上から順番に読み込まれます。
そのため、スタイル3もスタイル4もブラウザに読み込まれていますが、スタイル3が先に読み込まれ、その後スタイル4で上書きされている状態です。
したがって、この場合スタイル4のプロパティが優先されます。

下記のように同じプロパティを指定しなければ、両方が適用されます。

example3

//スタイル5
.message{
  background-color: red;
}

//スタイル6
.message{
  // background-color: yellow;
  font-weight: 900;
}

4.ファクターが複数重なった場合

前述した3つのファクターがそれぞれが重なった場合はどうなるでしょうか？
例えば、以下のような場合

example4

//スタイル7
//コードが記載される箇所（優先度：低）
//セレクタの詳細度（優先度：高）
//セレクタの種類（優先度：低）
.test2{
  .message{
    background-color: red;
  }
}

//スタイル8
//コードが記載される箇所（優先度：高）
//セレクタの詳細度（優先度：低）
//セレクタの種類（優先度：高）
#message{
  background-color: yellow;
}

この場合って「セレクタの種類」「セレクタの詳細度」「コードが記載される箇所」のファクター同士の優先度が分からないと答えが出せませんよね…😓
なので、それぞれ検証してみましょう！

5.検証

検証内容：どのファクターの優先度が高いのか確認する。
検証結果を以下の表で整理します。

	セレクタの種類	セレクタの詳細度	コードが記載される箇所
セレクタの種類	-
セレクタの詳細度		-
コードが記載される箇所			-

5.1 【検証1】セレクタの種類×セレクタの詳細度

検証コード

検証1

//スタイル9
//セレクタの種類（優先度：低）
//セレクタの詳細度（優先度：高）
.test1{
  .test2{
    .message{
      background-color: red;
    }
  }
}

//スタイル10
//セレクタの種類（優先度：高）
//セレクタの詳細度（優先度：低）
#message{
  background-color: yellow;
}

結果

結果：「セレクタの種類」の方が「セレクタ詳細度」より優先度が高い

	セレクタの種類	セレクタの詳細度	コードが記載される箇所
セレクタの種類	-	⭕
セレクタの詳細度	✖	-
コードが記載される箇所			-

5.2 【検証2】セレクタの種類×コードが記載される箇所

検証コード

検証2

//スタイル11
//セレクタの種類（優先度：高）
//コードが記載される箇所（優先度：低）
#message{
  background-color: blue;
}

//スタイル12
//セレクタの種類（優先度：低）
//コードが記載される箇所（優先度：高）
.message{
  background-color: green;
}

結果

結果：「セレクタの種類」の方が「コードが記載される箇所」よりも優先度が高い

	セレクタの種類	セレクタの詳細度	コードが記載される箇所
セレクタの種類	-	⭕	⭕
セレクタの詳細度	✖	-
コードが記載される箇所	✖		-

5.3 【検証3】セレクタの詳細度×コードが記載される箇所

検証コード

検証3

//スタイル12
//セレクタの詳細度（優先度：高）
//コードが記載される箇所（優先度：低）
.test2{
  .message{
    background-color: pink;
  }
}

//スタイル13
//セレクタの詳細度（優先度：低）
//コードが記載される箇所（優先度：高）
.message{
  background-color: purple;
}

結果

結果：「セレクタの詳細度」の方が「コードが記載される箇所」よりも優先度が高い

	セレクタの種類	セレクタの詳細度	コードが記載される箇所
セレクタの種類	-	⭕	⭕
セレクタの詳細度	✖	-	⭕
コードが記載される箇所	✖	✖	-

結論:　ファクター同士の優先度は「セレクタの種類>セレクタの詳細度>コードが記載される箇所」

6.優先度についてまだ把握不足な箇所がある🙄

以下のコードはどちらが優先されると思いますか？

example5

//スタイル14
//セレクタの種類（優先度：低）
//セレクタの詳細度（優先度：高）
//コードが記載される箇所（優先度：低）
.test2{
  p{
    background-color: purple;
  }
}

//スタイル15
//セレクタの種類（優先度：高）
//セレクタの詳細度（優先度：低）
//コードが記載される箇所（優先度：高）
.message{
  background-color: pink;
}

答えは…

スタイル14が優先されるんです！
これが私の中でまだ消化不良を起こしております。

親要素のセレクタの種類が優先度に影響を及ぼしている？🤔
ご存じの方がいたら教えてください🙏

@angeartさんにすごく納得のいく回答をして頂きました！！😁(この記事のコメント欄参照)
セレクタ―によって重みが違うみたいですね。
idセレクタ―にはクラスセレクタ―がいくら集まっても勝てないみたいな
詳細は以下をご覧ください。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

7.scssについてまだ理解不足だが「プロパティが適用されない不具合😭」を起こさないために

scssを完全に理解できればよかったのですが、私の分析力ではこれが限界でした。ではどのようにして「scssが適用できていない」不具合を防げばよいでしょう？

私はコードを追加する時に【めんどくさがらずに既存scssコード構造の中に追加すること❗❗】を提案します。😄（それが普通では？🤔）

コードを追加する際、私は既存コードを読むのが面倒なので一番下に追加コードを書いていました。

//既存のコード
.test1{
  p{
    background-color: purple;
  }
}

//追加したコード
.message{
  background-color: pink;
}

このような書き方をすると、優先度の沼にハマってしまいます…
これを今日からやめます！！
明日からは、後付けせずに既存コードの構造の中にちゃんと書くようにします！

//既存のコード
.test1{
  p{
    background-color: purple;
  }
  //追加したコード
  .message{
    background-color: pink;
  }
}

こうすればリーダブルになりますし、親要素の違いによって優先度が混乱することもありません！（親要素を共通にしたため、基本ルールだけに従って優先度を把握できる。🙌）

6. さいごに

scssってプロぐらいミング言語じゃないから簡単でしょ（笑）
とか思ってました。😭
深堀していくとまだまだ分からないことがたくさんありました。
今後はscssと"ちゃんと"向き合いたいと思います！

scssについて、分かったことがあれば、また記事にしたいと思っておりますのでよろしくお願いします！😀