マークアップ時のクラス名の付け方が知りたい（トップと下層でダブらないように）

Question

トップと下層でクラス名が被ってしまうことがうっかりあるですが、みなさんトップページと下層ページで何かクラス名は意識して付け方変えていますか？

例えば、トップページでお知らせの欄のタイトルとしてnews-titleというクラス名を付けたとします。

そしてこのnews-titleというクラス名にcssを当てて、例えばfont-size: 24px;とかcolor: red;とかのスタイルを指定したとします。

次にお知らせの下層ページで、またnews-titleというクラス名を使用すると、当然ですがトップページで指定したスタイルが下層ページにも反映されてしまいます。

私としてはお知らせのタイトルという意味で、直感的にnews-titleというクラス名を、トップページでも下層ページでも使いたくなるのですが、みなさんは、もしトップページでお知らせのタイトルということでnews-titleと指定していて、下層ページのお知らせのタイトルの箇所でもクラス名付ける場合は、どのようにされていますか？
例えば、
・かぶらないように違うクラス名を付けますか？（news-title-lowerにするとか）
・かぶらせてもOKにして、css指定時に、親要素を頭に付けて、トップのは当たらないようにしていますか？（.news-lower .news-titleのように）←cssクラス指定の記述量が多いと表示速度が遅くなるのでダメとよく耳にしますので、これはダメなのかな？と思ったりしています。

上記のようにしているって方、または他にこんなやり方知ってるよって方、いらっしゃいましたら色々ご教示いただけると幸いです。
あと、そうしている理由もあれば嬉しいです。

どうぞよろしくお願いいたします。

Answer 1

自分が好きな方法で良いかと思います。

ひとつの例を挙げると、TOPページと下層ページが、ほぼ同じで、少しの違いであれば、クラスを追加して再設定する場合もあります。

TOPページ

<div class="news-title">***</div>

.news-title {
  font-size: 30px;
  color: black;
}

下層ページ

<div class="news-title hoge">***</div>

.news-title.hoge {
  font-size: 60px;
  color: red;
}

Answer 2

親要素+クラス名っていうのが端的でいいと思います。
又はheader-news-titleとかもいいかもしれません。
まぁどっちにしても表示速度は他で早くできるところが多々あるのでそこまで過敏になる必要はないと思います。