クラス名には様々な付け方があります。

SMACSS+BEMによるテーマ設計（for Drupal8）

何が正解というものはないですが、抑えておきたい考え方があります。

それはスタイルを当てるときのことを考えて、「コンポーネント単位」でクラスをつけることです。

https://codepen.io/kame/pen/ZdJLzp

<header id="header">
    <h1 class="main-title">タイトル</h1>
    <nav class="gnav">
      <ul>
        <li class="gnav-item"><a href="">メニュー1</a></li>
        <li class="gnav-item"><a href="">メニュー2</a></li>
        <li class="gnav-item"><a href="">メニュー3</a></li>
      </ul>
    </nav>
</header>

<main id="main">
    <article id="main-content">
        <h2 class="main-title">タイトル</h2>
        <p class="main-description">このサイトについての説明文</p>

        <section class="item" id="about">
            <h3 class="item-title">このサイトについて</h3>
            <p>HTMLや、CSSについての勉強を目的としたページ<p>
            <section class="about-item">
              <h4 class="about-item-title">HTML</h4>
              <p>HTMLで最低限必要な部分の説明</p>
            </section>

            <section class="about-item">
              <h4 class="about-item-title">CSS</h4>
              <p>CSSでよく使う部分の説明</p>
            </section>
        </section>

        <section class="item" id="html">
            <h3 class="item-title">HTMLの勉強法</h3>
            <p>HTMLで大事なのはその言葉が表しているものを意味付けすることが大事です。</p>
            <p>見た目を調整するのはCSSに任せましょう。</p>
            <p><strong>見出し</strong>、<strong>文章</strong>、<strong>リスト</strong>などの意味付けをするマークアップを心がけましょう。</p>
        </section>

        <section class="item" id="css">
            <h3 class="item-title">CSSの勉強法</h3>
            <p>HTMLでマークアップした要素に対してデザインをあてます。</p>
        </section>
    </article>
</main>

<footer id="footer">
    <p class="copyright"><small>&copy; copyright kamem</small></p>
</footer>

このように、下記のようなコンポーネントに分けて考えクラスをつけています。

• header
• main-title
• gnav
• gnav-item

• main
• main-content
• main-title
• main-description

• item
• item-title

• about-item
• about-item-title

• footer
• copyright

スタイルはコンポーネント単位で考え、 その外側に影響しないように考えて組んでいきましょう。