Ao meu ver atrapalha também no HTML, caso vc use ancoras internas na página normalmente se usa href="#link"
e no elemento que sera ancorado o id="link"
.
Se vc usar o id="link"
em vários elementos a sua ancora nunca ficara correta, pois ela não vai saber para qual elemento vc realmente quer fazer a ancoragem.
Repare que tendo duas ancoras lincando pro mesmo id
elas sempre vão apontar para o primeiro id
<a href="#link">menu 1</a>
<a href="#link">menu 2</a>
<div id="link" style="margin-top: 100vh">div menu 1</div>
<div id="link" style="margin-top: 200vh">div menu 2</div>
O mesmo acontece quando se usa o atributo da label
for="meu-btn"
e no input
o id="meu-btn"
Repare que clicando na label
ela só marca o primeiro checkbox
, pois os dois tendo o mesmo id
e as labels
aponto para o mesmo lugar
<label for="meu-btn">label1 btn1</label><br><br>
<label for="meu-btn">label2 btn2</label><br><br>
<input id="meu-btn" type="checkbox">btn1<br>
<input id="meu-btn" type="checkbox">btn2