id - используется для однозначной идентификации элемента, на странице может быть только 1 элемент с определенным id. Так же у элемента может быть больше 1 id.
class - используется для задания стиля многим элементам, и на странице может быть много элементов с одинаковым class. Так же у элемента может быть больше 1 класса.
В большинстве случаев можно использовать то и/или то, и это будет правильно. Но есть определенные случаи где использовать можно только id или наоборот.
дурной тон
- такого понятия нет в html. Есть объективные причины для использования id или class.
Если у Вас есть блок top-menu, его надо стилизовать и он один на странице и эти стили не применимы к другим блокам - оправдано использовать id, но и использование class не является ошибкой. Однако если таких блоков 2 - id использовать нельзя. Классы более удобны для стилизации, так как их можно иметь несколько для 1 элемента. Поэтому использовать id для стилизации кнопки - не лучший вариант, хоть и не ошибка.
вот пара цитат из авторитетных источников:
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.
www.w3schools.com/TAGS/att_global_id.aspThe id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
https://developer.mozilla.org/en-US/docs/Web/HTML/...
А вот из спецификации html5.2:
When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element’s tree and must contain at least one character. The value must not contain any space characters.
w3c.github.io/html/dom.html#element-attrdef-global-id 
