web-dev-qa-db-ja.com

ID、クラス、および要素タイププレフィックスを含めるためのHTML命名規則

HTML IDとクラスの適切な命名規則を説明するための適切なリソースを知っている人はいますか？また、要素タイプのIDを接頭辞にするかどうか、つまりbtnやボタンなどを知っていますか？

クラスは複数形か単数形か？ IDは一意であるため、IDは単数である必要がありますが、クラスはどうですか？

IDとクラスは名詞を使用するべきですよね？

私は既存のページに他のページを挿入するページを使用しています。部分的なページのようなものです...したがって... IDやクラスの前に名前が付いている人がいるかどうか疑問に思っていました..種類の名前空間や同様？

コメントや洞察は本当にありがたいです。

htmlcssxhtmlnaming-conventions
61
mark smith

必要に応じてセレクタでこれを推測できるため、タイプのプレフィックスは付けません。

form#contact {
    property: value;

}

あなたが説明した方法はハンガリー記法として知られており、あまり一般的ではありません。

あなたが言及したことのために、1つのdiv内に注入されたHTMLを配置し、1つのユニークなクラス/ IDを配置することができます。ホストページのCSSの他のルールではなくルールが有効になるように、CSSセレクターの詳細を調べます。 親ページ内の要素のスタイル設定に関する同様の質問への回答を参照してください。

11
alex

2015：既存のCSSおよびHTMLネーミングシステムに焦点を当てた新鮮な答え

選択した規則については、プロジェクトのニーズをターゲットとする要件を選択することをお勧めします。

つまり、プロジェクトは小さいですか、それとも巨大ですか？プロジェクトは再利用されるのですか、それとも何らかのテーマを処理する必要がありますか？開発者はCSS/HTMLに取り組んでいますか、それとも慣習に固執するのに十分な経験がありますか？などなど.

まず、この一般的な（良い？）プラクティスに気付いていない場合：IDをスタイリングフックとして使用しないようにするには、Classesのみを使用してください

なぜなら：

  • 非常に少数のブロック（ページヘッダー、ページフッターなど）のみが、他の場所で再利用されないという事実を100％保証できます。

  • 特異性を低く保ちたい場合、常にそれをオーバーライドする必要がある場合があります（追加のIDセレクターまたは！importantを使用せずに）

一般的な要件/慣習：

  • 名前は直感的で意味のあるものでなければなりません
  • 本当によく知られている略語（つまり、Messageの場合はmsg、accountの場合はaccnt）でない限り、名前を短縮しないでください。
  • 既知/共通名を使用：.site-nav、.aside-nav、.global-head、.btn-primary、.btn-secondary
  • 構造階層を許可します（BEM規約など）
  • 命名には-または_を使用します。おそらく主観的な（開発者の意見）および使用するキーボード言語に応じて。キャメルケースは、私が信じているブラウザ互換性の問題のために取り残されていることに注意してください。
  • 例外的な場合を除き、セレクタで要素を使用しないでください。これにより、柔軟性が高まります。 <input type="button"></input>を使用して作成したボタンがあり、<button></button>を使用するように切り替えたい場合、一部のセレクターで要素タイプを使用した場合、面倒な/時間のかかるリファクタリング/テスト/ prod-bug-一方、要素のないセレクターを使用すると、スイッチは無限に簡単になります。 SMACCSには慣例にもあります
  • 状態については、他の言語（php、Java、c＃）の既知の規則と一致させてください。つまり、「is-active」、「is-badass」などを使用します。
  • 左から右への名前：最も一般的なものから最も正確なものまで。 btn-bluetheme-create-accntまたはaccordion-modrnlook-userlist
  • クラス名またはID名は常に、プロジェクト全体で検索され、関連する結果のみを返すのに十分具体的である必要があります
  • 子孫セレクターを使用する場合は直接の子孫を優先します-.module-name > .sub-module-name vs .module-name .sub-module-nameを使用します。 ）

既知の規則：

構造的な命名規則：要素のクラスを、それがどこにあるか、どのようにではなく、何であるかを説明する見えます。以下の例を参照してください。

.page-container
     .page-wrap-header-n-content
     .page-header
          .branding-logo
          .branding-tagline
          .wrapper-search
          .page-nav-main
     .page-main-content
     .page-secondary-content
          .nav-supplementary
     .page-footer
          .site-info

プレゼンテーションの命名規則：要素の位置や外観を記述することで要素のクラスに名前を付けます。以下の例を参照してください。

.theme-ocean-blue
.theme-apricot-orange
.skin-red-tango
.skin-darkness

セマンティック命名規則：含まれるコンテンツを説明する名前。以下の例を参照してください。

.product-review
.notification
.language-switch
.currency-switch
.list-of-friends
.latest-status

BEMの命名規則：は「ブロック、要素、修飾子」を表します。構文は<module-name>__<sub-module-name>--<modifier-or-state>などです。ブロックは「メイン」コンテナであり、あなたがそれを呼ぶものは何でもモジュール/コンポーネントの一種です。要素は、メインコンポーネント（ブロック）の子コンポーネントです。修飾子はある種の状態です。 特性：構文（dblアンダースコアとdblダッシュの使用）、および子要素には、最も近いコンポーネントの名前が含まれている必要があります。以下の例を参照してください。

.nav-primary
.nav-primary__list
.nav-primary__item
.nav-primary__link
.nav-primary__link--is-active

.grid
.grid__item
.grid__description
.grid__img-wrap
.grid__img

.global-footer
.global-footer__col
.global-footer__header
.global-footer__link

OCSS命名規則：はオブジェクト指向CSSを表します。ブランディング目的またはデザインの一貫性のためにスキンを使用します（bgカラー、ボーダーカラーなど）。構造スタイルを抽象化します。以下の抽象的な構造スタイルの例。 OOCSSの2つの主要な原則：構造とスキンを分離し、コンテナとコンテンツを分離します。

 .global-width {
      min-width: 780px;    /* minimum width */
      max-width: 1400px;   /* maximum width */
      margin: 0 auto;      /* Centering using margin: auto */
      position: relative;  /* Relative positioning to create a positioning context for child elements */
      padding-left: 20px;
      padding-right: 20px;
      overflow: hidden;    /* Overflow set to "hidden" for clearfixing */
 }

CSSのガイドライン：

CSSスタイルガイドを共有する「トレンド」がありました。ニーズに合うと思われるものを選んで選択するために読むことができるいくつかのものがあります（命名規則だけでなく、これはあなたの質問の範囲外かもしれません）：

私の偏った意見：

現在、[〜＃〜] bem [〜＃〜]、semantic＆structural命名規則＆それは非常にうまく機能しています。

[〜＃〜] bem [〜＃〜]＆semanticworking非常にうまくいっています（はい、私のクラスに.list-of-friends__single-friendなどの名前を付けます）。 BEMは、物事を特にシンプルにします。CSSにネストの狂気がなく、非常に冗長なコードです。

Structural命名規則は、Webサイトの裸の構造、またはWebサイトに複数の構造がある場合は各「テンプレート」でも歓迎されます。私の意見では、これは非常に一般的な要素にのみ使用されるべきなので、慎重に使用してください。

プレゼンテーション命名規則：本当に??感謝しますが、感謝しません。特別な場合（つまり、異なるテーマでページ全体をスキンする）に考慮することができます。

[〜＃〜] ocss [〜＃〜]命名規則：私は認めなければなりませんが、これをさらに検討する必要があります。さらに調査するために、以下のリソースにリンクを提供しました。

リソース：

67
Adrien Be

多くの人は、あなたがこのようなことができることに気づいていません：

.awesome {
 /* rules for anything awesome */
}

div.awesome {
 /* rules for only awesome divs */
}

button.awesome {
 /* rules for any awesome buttons, but not awesome divs */
}

div.awesome h1 {
 /* rules for H1s inside of any div.awesome */
}

div.awesome>button {
 /* rules for immediate children buttons (not grandchildren+) of div.awesomes */
}
19
Ryan Florence