В чем функциональная разница класса и id?

id - это название, встречающееся на странице ровно один раз. И используется id не только для CSS и JS. Якоря на странице, привязка input к form и label к input - это тоже делается через id.

А class - это просто ярлычок, не имеющий никакой дополнительной семантики. Ярлычков-классов у любого элемента может быть сколь угодно много. Мы можем выбирать элементы по отдельным классам и комбинациям классов...

Если не путаю, у id выше специфичность в css-правилах.

ты точно понимаешь значение слова уникальный?

На одностраничниках это не очевидно. Если на странице много элементов, полезно уметь различать, это класс для стилей, или для захвата предмета из JS, потому что когда-то стиль может стать не актуальным, захочется удалить класс, а окажется, что на нем был прописан не только CSS, но и JS;

А когда у предмета уникальный Id - можно предположить, что наверняка у него есть какое-то взаимодействие с JS;

Так же, чтобы разделить мухи от котлет, если JS используется и для классов, иногда заводят отдельный класс с припиской js, типа

 Tmp 

Чтобы сразу разграничить, первое по умолчанию для стилей, а js- для скрипта. Не использую это прям везде, но иногда полезно) Если захочется один из классов удалить, не придется думать, не сломает ли это что-то в скрипте.

чуваг... мона вертеть (и на ку-ю тоже) все эти классы и ид (меняя их меж собой или не меняя с т.з. кода), но вот какая фтука с т.з. сео - сделаешь не по правилам - не будет успеха.
ну а с т.з. прогерства всякого - тебе выше написали, имям видней.

• id используется для конкретного элемента, он должен быть один в документе, а class можно применять и к нескольким элементам
• id можно использовать как якорь, а также для связки элементов формы друг с другом из коробки, если таким образом использовать классы, то такое поведение нужно самостоятельно написать на js
• в css у id специфичность 100, у class всего 10, это значит, что стили селектора по id переназначить сложнее – использовать селектор по id в css крайне нежелательно

Итого: id используется в html (для якорей и связки label с элементами формы) и в js, когда нужно обратиться к одному конкретному элементу, а class в css и в js для выборки любого кол-ва элементов.

Id это присваивание стиля к одному выбранному элементу
А класс может быть применен к нескольким элементам