セレクタの記述方法で悩んでいます。

Question

前提・実現したいこと

<p><a href="http://google.co.jp">サイトへ</a></p>の箇所を色変更させています。

CSSでコードを書いていたら、正しい記述は一体どれなのだろうかと疑問を持ったので、確かめたく質問致しました。htmlでこいったコードが出たときにどれも文字の色は指定されるのだけど、どの書き方を基準としようかいつも悩みます。

アドバイスください。よろしくお願い致します。

試したこと

悩んだ①～③の3つのCSSコードはどれを選んでもcolorプロパティがつきました

①　.wrapper p a {
  color: red;
}

② .wrapper a {
  color: pink;
}

③　.wrapper p {
  color: blue;
}

  <div class="wrapper">
    <h1>cssの練習</h1>
    <p><a href="http://google.co.jp">サイトへ</a></p>
  </div>

Answer 1

どれも正しいと言えるのではないか、と思いますが。
しかし、私見ですが、あえて理屈をこねるなら②が望ましいと考えます。

①は詳細度が高くなっているので避けたいです。
②と③ですが、色を付けたいのはアンカー要素に対してだけだろうと推測できるので、③より②が望ましいと思います。

もっと言えば、アンカー要素にクラスをつけて、そのクラスセレクタだけでセレクタを書くのが一番正しいと思います。

Comments

[nyanchuu]

コメントいただきましてありがとうございます。
どれも正しい・・そうですよね(;'∀')

すみません、詳細度について勉強してみたのですが詳細度が高いと避けたほうがいい理由が聞きたいです。

[Lhankor_Mhy]

このあたりの記事が参考になるかもしれません。

https://murashun.jp/article/programming/css/css-design.html

[nyanchuu]

記事まで張り付けてくださってありがとうございます！！idやimportantといった優先度が高い詳細度は上書きが発生してスタイル崩れが起きたりするのですね、CSSの破綻について理解するのに時間が掛かりそうです。詳細度が高いからいいと思っていました。

②か③のお話ではアンカー要素に文字色がついてればいいことだとでしたのでどちらかと問うと私も②を選ぶと思います。

ありがとうございます！

[Lhankor_Mhy]

お役に立てたようで何よりです。

Answer 2

「想定の動作をすれば（要件を満たせれば）正しい」ということになりますが、一部だけでは何とも言えないのもまた事実です。
全体のバランスや影響範囲から適切かどうかを考えることになります。

Comments

[nyanchuu]

コメントいただきましてありがとうございます。この部分だけでは判断が難しいのですね。
間違っていないコードなので曖昧になってしまうんですけど、学習を進めていきたいとおもいますm(__)m