HTMLにおいて、id属性全てをclass属性に変えると、
どのようなデメリットがあるのでしょうか。

教えていただけたら幸いです。

m.ts10806

2019/03/13 08:08

似たような質問、またはネットの記事は探してみたのでしょうか？質問して解説の回答を待つより早いように思います

t_obara

2019/03/13 08:13

まずはidとclass属性にどのような意味があるのか、ドキュメントをご覧になるとよろしいかと思います。

masa_mf3

2019/03/13 08:14

確かにそうです。ネットや本2冊でも既に調べましたが、多面的な角度から考察したいと思い、質問させていただきました。

m.ts10806

2019/03/13 08:16

ではまずご自身の理解や確度的なところを追記されたほうが良いかと思います。何もない状態では「何も調べてない」「漠然とした興味」と捉えられますし、他人には書かれていないことで背景や前提まで汲み取るのは不可能なので。

退会済みユーザー

2019/03/13 08:25 編集

あなたがどのよーに考えているのかとか、質問文に書いておいたらいかがでしょーかそっちのほうが余計な手間がかからんとおもいますぜと、かいてたらmtsさんとかぶっちまった。さーせん

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

回答7件

ベストアンサー

HTMLの元々の目的からかなり離れていった利用のされ方をしていますので、
HTMLの歴史を絡めて調べて行くと理解・イメージしやすいんじゃないかと思います。

[HTMLの歴史] HTMLの誕生からHTML5までをザッと要点紹介 - Naverまとめ
なんだNaverまとめかよ…と思われるかも知れませんが、この記事が中々どうしてよく纏まっているので好きです。

元々HTMLはとある研究施設で作られた文書フォーマットです。
論文を管理して共有する事が誕生理由です。
それを推し進める為にタイトル・パラグラフ・リスト・テーブル・イメージといった記述が整備されて整えられていきました。
HTMLというのはマイクロソフトのWordや、AdobeのPDFと同じ目的で作られたものだったんですね。

その後、インターネットやホームページというカジュアルに紹介するものに使われるようになり、
HTMLってなんだっけ？？？みたいな感じにはなっていますが、
「そうだった、HTMLって元々は研究内容を発表するレポートだったんだ！」と思い出せると色んな場面で役に立つことでしょう。

id属性全てをclass属性に変えると……

(Webページは電子フォーマットではありますが)紙ベースのA4用紙に情報が書かれたものだとイメージしてください。
IDというのは同じ文書中に1度しか登場出来ません。

クラスの出席簿だったら出席番号＝IDみたいなものです。
重複することがありえない類の情報だと考えて下さい。

AとBの情報は粒が小さいから1つの用紙にまとめちゃおう！
その結果重複しそうな場合はクラス番号、学年、そもそもどの学校か…等の付帯情報を含めて一意なIDにします。
だからこそIDと同名のページ内リンクを張ればそこに自動的にスクロールしてくれるんです。

IDで表現しようかな〜、それともクラスで表現しようかな〜
そもそもこの考え方に至る時点でおかしいわけです。
（際どくて迷うことはありますけどね。）

どのようなデメリットがあるのでしょうか。

話を戻しましょう。
そのID、クラス名にした瞬間IDという意味合いが削れますがよろしいか？

文書の意味的にIDとして振る舞うべきならば、文書として駄目な方向に改修が加わります。
これがデメリットです。

また、CSSでもこの意味合いを重視する為に、
クラス名指定のセレクタより10倍程強力な優先順位が付けられ、殆どのスタイルを上書きしてしまうことになります。
既にHTMLとCSSがセットで存在しており、CSSがIDのスタイル上書きを当てにしたような書き方を行っている場合、修正は中々骨の折れる作業になることでしょう。

もし、まだHTMLの設計段階でまだ作られておらず、
いやいやそこまで強い意味でどちらにしようかと考えてなかったよ〜…というのであれば、
基本的にはクラスで統一しても構いません。

普段我々がWebページ作る時にかっちりとした論文を作るわけではありませんからね、
「この情報はIDで管理してあるべきだ、それが最も相応しいのだ！」というケースも殆どないですから。
IDを使う場合、ページ内リンクを張りたいから後付でID振るみたいな消極的な動機で良いと思います。

ほぼ全ての要素がクラスで名付けられていれば、CSSでも不自由な記述があっても簡単に上書きすることが出来ます。
子孫セレクタや子セレクターとセットで使えば、この文脈の箇所のみスタイルを上書き適用するということもやりやすくなりますからね。

投稿2019/03/13 08:40

編集2019/03/14 04:14

miyabi-sun

総合スコア21158

miyabi_pudding

2019/03/13 08:43

このご回答は、＋10個くらいつけたいですね。

mutsuki22

2019/03/13 08:47

凄いですね。自分には無理な回答です。

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

id属性撤廃で封印される機能

HTMLにおいて、id属性全てをclass属性に変えると、どのようなデメリットがあるのでしょうか。

id属性に依存している機能はいくらでもあります。

URLハッシュが使えません
<label for> が使えません
<input list> が使えません
<input form> が使えません

設計

全てを分類名(class)で管理する為には、設計からやり直しになります。

CSS詳細度、カスケード規則を念頭において、セレクタを書き直さなくてはなりません
DOM APIのid属性系APIは全てquerySelector()で書き換えるか、querySelectorAll() 等で可変数の対応に変えなければなりません

特に、querySelectorAll() で書き換える方針に変更すると、ただ置き換えるだけでは済まないので、関数の作りを見直す必要があります。

構造

HTML/CSS/JavaScriptを次のように区分する考え方があります。

構造 (HTML)
装飾 (CSS)
振る舞い (JavaScript)

基本的に、構造の書き換えは、他(装飾、振る舞い)への影響が大きいと認識して下さい。

Re: HelloMasa さん

投稿2019/03/13 11:34

編集2019/03/13 11:58

think49

総合スコア18164

退会済みユーザー

2019/03/13 11:39

> id属性に依存している機能はいくらでもあります。そういやaria-*系の属性も一部使えなくなるな。不便不便。

miyabi_pudding

2019/03/14 10:21

そうだ、labelとかHTML時点で、idじゃないと機能しないものいっぱいありましたね。

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

どちらがいいとかのメリット・デメリットではなく、”役割の違い”です。

idは、そのHTML文章ないで、一意であるべきで、
一意であるからこそのJS上での扱えるメソッドが違ったり、
classでは段階的に取得しなければ一つの要素を特定できないものを、
一発で特定の要素取得できたりなどします。

対してclassは、複数の要素のグループ分けに特化しております。
同じような仕様の要素をいくつも作りたい、といった時に用います。
（CSSの割り当ても含め）

ご質問にある通りに変えるのはいっこうに構いませんが、
大きく役割と仕様が異なるということは認識しておくべきです。

投稿2019/03/13 08:33

miyabi_pudding

総合スコア9528

とりあえず、ぱっと2つ挙げますねー
0. JavaScriptとかでそのidから要素を特定してる場合、JavaScriptがうまく動かなくなりますねー。対応するためにはidを指定していたときよりも複雑なセレクタ指定が必要になるでしょー。
0. 詳細度をidでごまかしていた場合、スタイルがくずれるかもしれませんねー。

投稿2019/03/13 08:13

退会済みユーザー

総合スコア0

マークアップ言語としては当然idとしての唯一設定する考え方は
文章の構造を指定するときには便利ですが、
近年のCSSやjsのセレクターの掴み方は柔軟性が高いので、
カスタムデータの出現によりidでしか実現できない機能は
ハッシュ（ページ内リンク）として利用できること以外
とりたてて思いつきませんね

単純にクラスへの置き換えはできますが、逆にメリットがないので
あまりお勧めできません。
クラスの場合グルーピングが基本なので、おなじクラスが複数タグに
振られていたり、任意にクラスを付け替えたりする使い方をされます。
自ずとIDとは運用方法がかわってくるでしょう。

IDのデメリットは１つの要素に複数のidが触れないこと

HTML
1// 以下全部むり
2<div id="hoge,fuga"></div>
3<div id="hoge fuga"></div>
4<div id="hoge" id="fuga"></div>
5
6//クラスなら以下可能
7<div class="hoge fuga"></div>
8

#js
特定のidがふってあるのは必ず1要素なので
基本的にはdocument.querySelector('#hoge')でつかみます
classは複数要素が基本（可能性が高いというべき？）なので
document.querySelectorAll('.fuga')でつかみます
formの要素などname属性を持つものは
document.querySelectorAll('[name=piyo]')のように
単一要素か複数要素かわからないのでAllで取りがちです
これはカスタムデータを使っても同様
document.querySelectorAll('[data-hoge=fuga]')

クラスは同じ名前でいくつ付加しても、重複を防いでくれるのはありがたい仕様。

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  var hoge=document.querySelector('#hoge');
4  hoge.classList.add('fuga1');
5  hoge.classList.add('fuga1');
6  hoge.classList.add('fuga1');
7  hoge.classList.add('fuga2');
8  console.log(hoge.classList);
9});
10</script>
11<div id="hoge">hoge</div>

カスタムデータはHTML要素にいくつでも設定ができるメリットがあるが
複数の要素は含めることができません。
jQueryでアクセスすると配列データを持つこともできるので使い勝手はあります。

javascript
1<script>
2$(function(){
3  console.log($('#hoge').data("fuga"));
4  console.log(document.querySelector('#hoge').dataset["fuga"]);
5});
6</script>
7<div id="hoge" data-fuga="[1,2]">hoge</div>

CSS

CSSはモダンブラウザではid,クラス,カスタムデータのどれでアクセスしても
さほど変わらないイメージ

CSS
1<style>
2#hoge{color:red;}
3.fuga{color:blue;}
4.fuga.piyo{color:lime;}
5[data-hoge="1"]{color:yellow;}
6</style>
7
8<div id="hoge">hoge</div>
9<div class="fuga">fuga</div>
10<div class="fuga piyo">fuga piyo</div>
11<div class="piyo">piyo</div>
12<div data-hoge="1">hoge=1</div>
13<div data-hoge="2">hoge=2</div>