クラスの命名規則

初心者にとって、htmlを書くときにhtmlタグにスタイルや名前を追加するのは頭の痛い問題であり、タグに何という名前を付ければよいのか分からなかったり、日常の開発において非常に不便です。今日はhtmlにおけるクラスの命名規則をまとめてみましょう。

共通クラスキーワード:

レイアウトクラス: ヘッダー、フッター、コンテナ、メイン、コンテンツ、サイド、ページ、セクション
ラッピングクラス: ラップ、インナー
ブロッククラス：リージョン、ブロック、ボックス
構造クラス：hd、bd、ft、top、bottom、left、right、middle、col、row、grid、span
listクラス：list、item、field
mainサブクラス : プライマリ、セカンダリ、サブ、マイナー
サイズクラス: s、m、l、xl、ラージ、スモール
ステータスクラス: アクティブ、現在、チェック済み、ホバー、失敗、成功、警告、エラー、オン、オフ
ナビゲーションクラス: ナビ、前、次、パンくずリスト、進む、戻る、インジケーター、ページング、最初、最後
インタラクションクラス: ヒント、アラート、モーダル、ポップ、パネル、タブ、アコーディオン、スライド、スクロール、オーバーレイ、
スターカテゴリ: レート、スター
分離カテゴリ: グループ、分離、分割線
およびその他のカテゴリ: フル、ハーフ、サード、四半期
テーブルカテゴリ: テーブル、tr、td、セル、行
写真カテゴリ: 画像、サムネイル、オリジナル、アルバム、ギャラリー
言語カテゴリ: cn、en
フォーラムカテゴリ: フォーラム、bbs、トピック、投稿
方向カテゴリ: 上、下、左、右
その他のセマンティック クラス: btn、閉じる、ok、キャンセル、切り替え、リンク、タイトル、情報、イントロ、その他、アイコン、フォーム、ラベル、検索、電話、日付、電子メール、読み込み中。 .キーワードを用意したら、まず簡単なルールをいくつか作りましょう。

簡単なルールを作成します: .item-img などのダッシュで接続します
2 つのダッシュを使用して、.item-img.item-img--small などの特殊化を示します。 .item-img の基礎を示します 特殊化
ステータスクラスは単語を直接使用します。.active、.checked などの上記のキーワードを参照してください。
アイコンには接頭辞 icon- が付きます (フォント アイコンの名前は .icon-font.i-name を使用して付けられます)。
モジュールは、.slide、.modal、.tips、.tabs などのキーワードで名前が付けられます。専門化は、.imgslide--full、.modal--pay、.tips--up、など、上の 2 つのダッシュで表されます。 .tabs--simple
js 操作クラスは js- prefix で統一する必要があります
.a.b.c.d など、4 つを超えるクラスを組み合わせて使用​​しないでください

変更キーワード: ヘッダーを例に挙げると、表現するプレフィックスを追加できます異なるヘッダー。たとえば、ブロック header.block-hd (hd は header の略称)、モーダル header.modal-hd、記事 header.article-hd です。
同じタイトルでも、ページタイトル.page-tt(タイトルの略)、ブロックタイトル.block-ttなどに分割することもできます。
同様に、これにより 2 番目の質問が生じます。特定のクラスを特化したい場合はどうすればよいでしょうか?

特殊なクラス: 上記の tt を例に取ると、おそらく 3 つの方法があります:
最初の犯罪: クラスを直接変更し、.page-tt を .page-user-tt に変更します (% プレフィックスを使用できます) scss は共有コードを定義します)。
2 番目の方法: クラスの特殊化を追加します。上で定義したルールに従って、クラスを .page-tt.page-tt--user になるように追加します。 .page-tt--user は 1 つではないことに注意してください。 .page-tt に基づく独立したクラス。
3 番目の方法: 親クラスを使用して範囲を指定し、.page-user .page-tt を形成します。
通常は 2 番目と 3 番目のメソッドを使用します。どちらも同じ .page-tt を持っているため、いくつかの基本的な共通スタイルを制御しやすくなります。
親クラスを介して制御する 3 番目の方法から、議論する 3 番目の問題である階層構造に入ります

レベル 階層の最も適切な例は、次のような ul>li 構造です:

<ul>
    <li>
        <a href="#"><img src="" alt=""></a>
        <h3><a href="#"></a></h3>
        <p></p>
    </li>
</ul>

// 继承式
ul.card-list
    li.list-item
        a.item-img-link>img.item-img
        h3.item-tt>a.item-tt-link
        p.item-text

// 关键词式
ul.card-list
    li.item
        a.field-img-link>img.field-img
        h3.field-tt>a.field-tt-link
        p.field-text

最後に、階層構造により、スタイルの範囲を制御する方法という最後の質問にたどり着きます。

関連する推奨事項:

class と id の違いは何ですか

HTML の要素のクラス名を指定する属性クラス

id と class を使用して次のことを行う方法CSS分析で要素スタイルのインスタンスを制御する

以上がクラスの命名規則の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。