HTMLのidやClassの命名規則の工夫

2019/11/20 02:38

ご回答いただき有難うございます。 BEMは他の方からもご提案があったので、こちらは是非見てみようと思っていました。他のご提案があったものも見て、考え方が馴染みそうなものを取り入れて進めてみようと思います。有難うございます！

行動規範の内容に同意します

ベストアンサー

※わたしも素人なので、この回答は真に受けず、プロの方の意見を尊重してください。

自分なりの工夫をお伝えしてみます。
（他の回答者様やプロの方からツッコミをいただけたら、自分の勉強にもなると思ったので。）

###(1) 割り当てた名称からレイアウトのどこに該当する部分なのか想起しやすいものとする

ポイント1. content_headやcontent_bodyのような名前が浮かんだ場合、
contentとbodyでクラスを分けるようにしています。

理由

CSSで.content_bodyと指定する場合と.content.bodyと指定する場合で手間は変わらない。
content部分で共通のスタイルはそちらに適用させておいた方が、contentを増やす時に楽。

ポイント2. 要素ごとではなく、スタイルごとにクラスを付加しています。

例:.center{ margin: 0 auto; } .shadow{ box-shadow: #000; }

理由

名前が変わったからといって適用させたいスタイルが変わるわけではない。

ポイント3. content_body_imgやcontent_body_explのような固有名詞は、クラスではなくidで指定しています。

理由

idはユニークなものを指定する必要があるので、クラスで固有名詞を指定するよりも他人や未来の自分にとって、わかりやすい。
最初から固有名詞であることを意識することで、よりわかりやすい命名ができる。（気持ちの問題ですが）

###(2) 長くなりすぎる名称は避ける

わたしは逆だと思います。
「あとから読むと説明不足でよくわからない名前」と
「長いけど、それが何なのか具体的に記されてる名前」だったら、
わたしは後者のほうが可読性は高いと思います。

それに、ずっと短い名前をつけ続けることは不可能です。
また、名前を短略化しすぎると、不必要なコメントアウトが増えてしまい、むしろ管理がしにくくなると考えてます。

最初は長い名前をつけて、完成に近づくにつれて短い名前をつけるようにしたほうが、
最終的に可読性のよいコードになると思います。

JavaScriptをやってて感じたことですが、長過ぎる名前を避けたくなるのは、惰性的な考え方だと思います。
JavaScriptではひとまとまりの処理に対して、たくさんの関数を命名する必要があります。
最終的にひとまとまりになった関数に短い名前をつけるのは良いことだと思いますが、
最初の方から短い名前をつけてると、関数が増えれば増えるほど、
名前が重複しそうになり、なんという名前をつければいいか分からなくなってしまうのです。
そうすると、質問者さんのように後々どん詰まりになります。

###(3) 間違っても意図しない重複した名称を使用しない

これについては他の回答者さんも仰ってますが、エディタによっては、たとえばmain_wと打った時点でmain_wrapperというAuto Completeの候補が表示されます。少なくともSublimeText3ではそうです。
（プラグインの影響かもしれませんが）
表示されるということは存在するということですので、そこで判断しています。いちいち検索するのは手間なので。

追記:
(3)についてですが、
よく考えたらSublimeTextでは、範囲選択した文字列と同じ文字列があった場合、
そこに目印が表示される機能があります。（プラグインの影響かもしれませんが）
ATOMにもありませんか？
参考までにスクリーンショットつけますね。

Auto Completeで候補を表示する方法

重複する文字列の目印を確認する方法

投稿2019/11/20 02:20

編集2019/11/20 03:25

総合スコア975

2019/11/20 02:29 編集

回答中に、他の方からも参考になる回答を沢山いただけるようで良かったです。 BEMなどはわたしも知らなかったので勉強してみます。自分としては「js-○○○」や「is-○○○」という名前をつけるよりかは、 JavaScriptのターゲットにするための名前は、idで付けるようにしています。（document.getElementByIdで取得したほうがシンプルなので。）グループ的な指定が必要であればクラスで名付けますが、それ専用のクラス名を付けるようにしています。小規模な作品であればこれで十分かと思います。

2019/11/20 02:40 編集

document.getElementsByClassNameはループ書かないと使えないこと多数ですからねというより、ループ書かなくても使えることがあるのか疑問。 ->と思ったらclass名の要素の数を数えるのには使えるか

2019/11/20 03:09

ご回答及びコメントありがとうございます。大変、勉強になりました。 1) 一つ皆様のコメントで共通する点で自分自身すぐに修正してみようと思った点はcontent_body_imgのような具体的なClass名称について、分けてClass名称を追加する方法です。確かに自分自身でもネスト化するほど、Classが具体的な名称になっておりID化してしまっているように感じます。そのためにclassと言う括りにCSSをあてているのではなく、気づいたら要素ごとになっておりCSS自体がカオス化するということに気が付かされました。 2) 長くなりすぎる名称は確かに可読性という点では仰る通りかもしれません。長すぎてもというのもあるのでバランスの問題もあるかもしれませんが、結果的に今自分でClassを見返したときに名称だけでは内容が判断できなくなってしまっている場合もあるので、少なくともメンテンナンスのためにも「意味」が通る名称にすべきかとは感じました。 3) 実は自分は殆どidを使用することはなく（理由は誤って同じIDを使用していたことに気が付かずにJS上、エラーの発見に途方もない時間を費やしたことがあるということなのですが、、、）JS側ではIDを利用しようという発想になったことがないのですが、これは是非皆様の意見も聞いてみたいところです！いずれにしても、とても分かり易いご回答を頂き御礼を申し上げます。

2019/11/20 03:15

外から失礼します。 > これは是非皆様の意見も聞いてみたいところです！私の場合はJSで処理するから、ではなく、HTML,CSS中心で考えます。

2019/11/20 03:27

(3)について追記+スクショ追加しました。

2019/11/20 03:32

> ATOMにもありませんか？ atomにもあります。

2019/11/20 03:42

asuchi0819さん補足ありがとうございますm(_ _)m maguzoさん入力中はAutoCompleteの表示を意識して、入力後に不安だったら、この方法で重複文字列がないかサラッと確認するだけで十分かと思います。

hentaiman

2019/11/20 03:44

> 自分としては「js-○○○」や「is-○○○」という名前をつけるよりかは、質問者はひとりで作っているから問題ありませんが、もしも後々ご家族やお友達（？）と一緒にhtmlデザインしてみたりとか始める可能性があるなら分けておくのはアリだと思います CSS調整屋さんがhtmlいじる時に、「__から始まってるクラスは触るなよ」と一言言っておくだけでjsへの影響の心配いらないですからね >JS側ではIDを利用しようという発想になったことがないのですが、これは是非皆様の意見も聞いてみたいところです！ htmlの構成要素で判断します。要素がユニークでidを振る必要があるなら振りそうでないなら振りません cssやjsの為に必要ならクラスを振ったりやdata-＊＊＊を持たせます

2019/11/20 04:16

Auto Completeがあることはこちらでも確認することができました。もしプラグイン等で同じように目印を残してくれる機能があればうれしいですが、探してみます。また、idとクラスの使い分けについては私が現状一人でポチポチ小規模なものをやっているので、それを考慮すればまあそれに合う方法でということなのかもしれませんが、ちょっと現場の実務として「__」の件は面白いなと感じました。確かに複数の人間でプロジェクトとして進めて居れば、何か識別できるものがあれば良くて両者が同意していれば問題はないわけですしね。ただ、万が一にもこれを誤って破るものがでたら、相手方には急に原因不明なエラーがおきるので徹底しなくてはならないのかなと推察いたしました。有難うございます！

行動規範の内容に同意します

idはどうしようもないけれど、classに関しては単語で分けて複数割り当てると良いと思いますよ

<div class="main_wrapper">
  <div class="content_head"></div>
  <div class="content_body_1"></div>
　<div class="content_body_2"></div>
  <div class="content_foot"></div>
</div>
<div class="main_wrapper">
  <div class="content_head_yesterday"></div>
  <div class="content_body_img"></div>
　<div class="content_body_expl"></div>
  <div class="content_foot_yesterday"></div>

  <div class="content_head_today"></div>
  <div class="content_body_img"></div>
　<div class="content_body_expl"></div>
  <div class="content_foot_today"></div>
</div>

↓

<div class="wrapper main">
  <div class="content head_010"></div>
  <div class="content body_010"></div>
  <div class="content foot_010"></div>
</div>
<div class="wrapper sub">
  <div class="content head_010 yesterday"></div>
  <div class="content body_010 img"></div>
　<div class="content body_020 expl"></div>
  <div class="content foot_010 yesterday"></div>

  <div class="content head_010 today"></div>
  <div class="content body_010 img"></div>
　<div class="content body_020 expl"></div>
  <div class="content foot_010 today"></div>
</div>

三つ目のcontentbodyを追加したくなったらcontent body_030として追加する

複数クラスはcssセレクター的には例として以下のように書きます
.content.head_010.today{
}

投稿2019/11/20 01:35

hentaiman

総合スコア6426

2019/11/20 02:18

ご回答有難うございます。なるほど、増やす+分ける方式ですね。もともとあてたCSSやJSの動きは踏襲できる点は利点ですね。少し複数セレクタで”且つ”指定する場合に絞り込むときに少し冗長にセレクタが見えてしまうかもしれませんが、これも慣れの問題かもしれません。有難うございます！

hentaiman

2019/11/20 02:53

冗長かどうかは作る人次第なので・・・決め兼ねているのなら試しにbootstrapを使ってみてはどうでしょうか？決められたクラスを割り当てて行くだけですが、書いている内に感覚を掴めるかもしれません

2019/11/20 03:13

そうかもしれません。 Bootstrapは使ったことがないのですが、今少し拝見したところ読み込ませて彼らの自前で割り当てられているクラスを指定すればそれが適用されるというものかと理解しました。確かに感覚でつかめる部分があるかもしれませんので、さっそく初めてみました！有難うございます。

行動規範の内容に同意します

ユニークなものはidとして#contentとか#menuとか絶対に１つしかないなら
常識的な付け方をすればいいかと（menuは複数あるならユニークにつけなおすかクラスにする）

クラスについてはたとえばwrapクラスをつけるときは、
「ラップする」目的以外の意味を持たせなければすべて同じ名前で済みます。
別の意味合いをつけるならその用途に合わせたクラスを付加すればいいでしょう。

HTML
1<style>
2.active{color:red}
3</style>
4<div class="wrap">
5<div class="wrap">
6<span>1</span>
7<span>2</span>
8<span>3</span>
9</div>
10<div class="wrap active">
11<span>4</span>
12<span>5</span>
13<span>6</span>
14</div>
15<div class="wrap">
16<span>7</span>
17<span>8</span>
18<span>9</span>
19</div>
20</div>

あとは例示されたものだと

HTML
1<div class="main_wrapper">
2  <div class="content_head_yesterday"></div>
3  <div class="content_body_img"></div>
4　<div class="content_body_expl"></div>
5  <div class="content_foot_yesterday"></div>
6
7  <div class="content_head_today"></div>
8  <div class="content_body_img"></div>
9　<div class="content_body_expl"></div>
10  <div class="content_foot_today"></div>
11</div>

↓↓↓

HTML
1<div class="wrap">
2  <div class="content head yesterday"></div>
3  <div class="content body img"></div>
4　<div class="content body expl"></div>
5  <div class="content foot yesterday"></div>
6
7  <div class="content head today"></div>
8  <div class="content body img"></div>
9　<div class="content body expl"></div>
10  <div class="content foot today"></div>
11</div>

とか、構造まで考慮していいなら

HTML
1<div id="content">
2  <div class="yesterday">
3    <div class="head"></div>
4    <div class="body">
5      <div class="img"></div>
6      <div class="expl"></div>
7    </div>
8    <div class="foot"></div>
9  </div>
10  <div class="today">
11    <div class="head"></div>
12    <div class="body">
13      <div class="img"></div>
14      <div class="expl"></div>
15    <div class="foot"></div>
16  </div>
17</div>

など、するとクラスの意義がわかりやすく、つけ間違いもなくなると思います

投稿2019/11/20 01:45

yambejp

総合スコア116661

2019/11/20 02:36

ご回答をいただき有難うございます。なるほど、よくわかりました。因みになのですが、最後に構造まで考慮していいならという前提で記載いただいたコードが実際に実務感にあったものとしてご提示いただいたと思います。これが構造と名称がマッチしていて確かに見通しが良いのですが、例えばここで.yesterdayと.todayに同じcssをあてたいと考えた場合には 1) .yesterday,.today{} 2) それぞれに例えばdate classを追加して .date{} のいずれの方法で対応されますか？前段からすると後者の２）が推奨されるような印象がありますが、また構造の可視化度でいえば、1)の方がすっきりはするので恐れ入りますが、重ねてお尋ねさせてください。宜しくお願い申し上げます。

yambejp

2019/11/20 02:44 編集

yesterdayクラスにHTML要素が4つあるのと HTML要素それぞれにyesterdayクラスをつけるのだと管理のしやすさが違うと思います前者のほうが構造的に処理ができるのでつけ忘れやつけ間違いが起きにくいでしょうしかしグルーピングが必ずしもまとまっているとは限りませんので例えば離れたところにおなじ属性を付けたい場合など考慮すれば後者のほうが汎用性が高いといえます

2019/11/20 03:14

コメントありがとうございます。なるほど、一概に絶対こちらですというよりも一長一短ですね。自分の肌に合う方法を取り入れてみようと思います。有難うございます。

行動規範の内容に同意します

CSSのルールは千差万別あり絶対的にこの命名規則が正しいといったものはありませんが、近年よく採用されている命名規則は「BEM」だと思います。
派生ルールは色々とありますが根本的な考えはBEMの手法となっているものが多いです。
「CSS BEM」などと調べると色々と出てきます。

classやidの名称を変更する場合に該当するcssやJavascriptのセレクタも漏れなく変更する良い方法

機能と見た目を分けて考えjs用のクラスとスタイル用のクラスで分ける方が多いと思います。
接頭辞に「js」とつけるターゲット用クラス、アクションによって見た目を変える場合は接頭辞に「is」をつけるステートクラスなどで対応しているケースが多いです。

js
1const $target = document.querySelector('.js-target')
2
3$target.addEventListener('click', () => {
4  if ($target.classList.contains("is-active")) {
5    $target.classList.remove("is-active")
6  } else {
7    $target.classList.add("is-active")
8  }
9})

css
1.btn { ... }
2.btn.is-active { ... }

html
1<button class="btn js-target"></button>

投稿2019/11/20 01:43

編集2019/11/20 01:44

nt4c

総合スコア768

2019/11/20 02:05

ご回答ありがとうございます。 BEMで検索すると興味深い内容がわんさか出てきました！こちらはゆっくりと読み進めて取り入れてみようと思います。また、接頭辞でJSとCSSのセレクタを使い分ける方法は単純ながらなるほどと思いました。いつも頻繁に変わる方はCSSなのでこれをしておけばCSSを変えても都度にJSまでに影響は及ぼさずに作業が進めることができそうです。有難うございます、質問をして良かったです！

行動規範の内容に同意します

(3) 間違っても意図しない重複した名称を使用しない（自分はEditorとしてATOMを使っているのですが、都度に検索して重複がないかをチェックするのですが結構大変です、、）

自分は特にプラグイン入れていませんが（日本語化以外）、ATOMでは、class,id等入力時に既に使われている場合、表示されますが？

投稿2019/11/20 01:19

編集2019/11/20 05:35

総合スコア10429

2019/11/20 01:20

> 既に使われている場合、表示されますがこれの開発者側の意図としましてはおそらく既出のclass,idを教えるためだとは思いますが逆手にとって「使われていないか」の判別にも使えます。

2019/11/20 01:31

コメントありがとうございます、ATOMで今試しに <div id="wrapper"></div> <div id="wrapper"></div> とコーディングしてみましたが、特にalertのようなものは2個のidを付したときにでないのですが、具体的にどこをご覧になられていらっしゃいますでしょうか？宜しくお願い申し上げます。

2019/11/20 01:39

ちょっと今、Windows Update中なので画像を提示できないので少々お待ちください。