◆ グローバル変数と重複しないような名前なら別にいいと思う
◆ IE の場合は name 属性もグローバル変数になってこっちのほうが優先度高い

HTML の id に設定した名前はグローバル変数としてアクセスできます
試しにいろいろやるときには便利なんですよね
いちいち document.getElementById をかかなくていいですから

ただ使わないほうがいいみたいなことを言われてるイメージがあります
仕様的にはちゃんとありますし 非推奨とかにもなっていません

https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object

避けるべき?

調べてみても IE の独自仕様が広まったとか使わないほうがいいみたいなことを書いてますが 避けるべきというほどの明確な理由はないようです
グローバル変数で隠されるとは言われていますが 普通に考えて同じ名前で複数にアクセスできないのは当たり前ですし そもそもグローバル変数に同じの名前を置かないです
最近は module を使うのでグローバル変数に何も置かないです
唯一影響しそうなのがデフォルトの window のプロパティとの重複です
id のアクセスは prototype チェーンでちょっと後ろの方になります

document.body.id = "foo"

Object.getOwnPropertyDescriptor(window, "foo")
// undefined

Object.getOwnPropertyDescriptor(window.__proto__, "foo")
// undefined

Object.getOwnPropertyDescriptor(window.__proto__.__proto__, "foo")
// {value: body#foo.light-chip.win, writable: true, enumerable: false, configurable: true}

なのでデフォルトの window のプロパティのほうが優先です
ブラウザの更新で window にプロパティが増えたときに名前がかぶると途中から動かなくなる可能性はあります
あとはライブラリや拡張機能がグローバルに配置した名前との重複もありえます

name とかはありがちなやつですが そのことを知ってれば デフォルト名に使われそうにない名前にしますしそこまで気にせず使っても良いと思います
ライブラリはページの管理者が把握してるはずですし 拡張機能は入れる側の責任なのでページ作る側が配慮する必要ないと思います
心配なら id にハイフン入れると通常の変数名として使えないのでかぶる心配はほぼないです
ただアクセス手段がちょっと不便になります

window["foo-bar"]

document.getElementById よりは短いですが id をそのまま書くシンプルさですまないのなら getElementById でも大差無い気もします

まとめると 個人的には 「デフォルト含めグローバル変数と重複しないような id なら使っても大丈夫」 と思ってます

IE の場合

注意したいのが IE の場合です
IE が元になった機能らしいのですが IE とはちょっと違うところがあります
それは name 属性もグローバル変数になるところです

var aaaa = document.createElement("a")
aaaa.id = "bbbb"
aaaa.name = "cccc"

document.body.appendChild(aaaa)

window.bbbb === aaaa
// true

window.cccc === aaaa
// true (IE のみ)

Chrome や Firefox では cccc で a タグを取得できませんが IE のみ取得できます
そして優先度はツリー上の順番ではなく name のほうが id よりも高いようです
id="abc" の要素を作って abc でアクセスしても name="abc" の要素が別にあるとそっちを参照してしまいます
a タグの name はいまではほぼ使わないですけど input で name を使うケースはあるので IE だけ予想外な要素を取得してしまってるということはあるのかもしれません
でもさすがにもう IE サポートは考える気ないので別に動かなくてもいいかなと思ってます