CSSファイルに、一部のページのみに適用するプロパティを書く際のルール

Question

Webサイト全ページ共通で使用するCSSファイル（通常はstyle.cssとする？）の中に、一部のページのみで使用するプロパティを記載する場合、どのような記載方法を取るのが一般的なのでしょうか。
自分は現状、headerとfooterを除いたwrapperと呼ばれるエリアにしかページ毎固有のプロパティを用意しない作成スタイルで、HTMLのli要素順（通常、headerリンクの左から順番）に

/*　＜index.html以下に反映＞　*/

#wrapper{
margin: 0 auto 20px;
overflow: hidden;
}

/*　＜profile.html以下に反映＞　*/

#name{
font-style: italic;
}

（中略）

/*　＜question.html以下に反映＞　*/

のようにコメントで区切ってコーディングしようとしているのですが、この方法が一般的なフロントエンドのコーディング規約とかけ離れていたら、後々困るかなと思い、今回質問させていただきました。
先ずは自分で調べてみて、以下のサイトに辿り着き、一部ページにのみ反映させる方法（およびその逆）自体は存在することは認識しております。ただ、どのファイルにどの順番で記述するべきかの解説に辿り着くことが出来なかったため、今回質問させていただきました。

https://www.nishi2002.com/15404.html
https://www.nedia.ne.jp/blog/tech/2017/06/06/8650

Answer 1

bodyにクラスを付与するのはいいと思います。ただ特定の1ページにしか使わないのであればheadタグ内に書くとか、id使うぐらいならinlineで書いてもいいのではないでしょうか。どうしても場合分けが増えるとcssが長くなります。

コメントを書いて適用される対象をわかりやすくするのは親切でいいことだと思います。

Comments

[st-access_91s]

コメントありがとうございます。
現状、HTMLタグ内にCSSコードを書くのは、spanタグ等の必然性のあるもの以外なるべく控える方向性でコーディングしておりますが、CSSファイルの肥大状況を見ながら調整を検討していきたく思います。

Answer 2

汎用的に2つめ、3つめ、と増やしていけないので、idにCSSを指定するのはあまりよくないです。
classを使うようにしてください。(絶対に今後もページ内に1箇所しかでてこないと、断言できる場合はidでもいいかもしれませんが)

---

コメントを書くのは良いと思います！
が、SCSSなどで、ファイルを分割できるならそちらのほうがいいような気もします。

---

各ページのbodyタグに以下のようにクラスを書いておいて、
そのページでしか使用できないようにしておく、という方法もあると思います。

body.profile .name {
  font-style: italic;
}

Comments

[st-access_91s]

コメントありがとうございます。
まだあまりclassを使っていなかったのですが、今後はclassにシフトしていく、bodyタグにクラスを書くことも考慮に入れます。
HTML・CSSの基礎学習が落ち着いたら、SCSS等も更に検討していきたく思います。

Answer 3

使用している教材にCSSのサンプルコードが付与されていたため、そちらの記載ルールを確認しましたところ、「全ページ共通の項目」→「個別ページの項目」→「メディアクエリー」の順で、プロパティを上から順に記載しておりましたので、その書き方に則ろうと思います。