Короткий ответ
id уникален на странице; class можно повесить на много элементов.
Практика
<div id="main-nav" class="nav nav--dark"></div>
- CSS:
#id специфичнее .class
- JS:
getElementById / querySelector('#…') vs getElementsByClassName / .class
label for и якоря #fragment завязаны на id
- В компонентах часто избегают
id (коллизии при повторном использовании)
Итог
class — группировка и стили; id — уникальная точка привязки. Дублировать id — ошибка.