тут несколько моментов:
1. id имеет очень большой приоритет css. объяснить двумя словами тяжело, но вкратце, если вы задали какие-то свойства для id-селектора #x, что ни пишите в классовом селекторе .y, если он подтягивает стили от id-селектора, то они возьмут верх над классовым селектором. Никакие элементы не должны иметь приоритет над другими. Так удобнее редактировать стили.
2. Есть неписанные "законы" БЭМ, которых придерживаются опытные разработчики. Существует много всяких философий БЭМ, самая популярная - яндексовская - погуглите. БЭМ позволяет лучше разбираться в коде, работать с препроцессорами и производить более удобные операции при работе в js.
...ну есть и еще несколько моментов.
Главное отличие id от class в том, что стили id нужно задавать для одного элемента, уникального. А class можно применять для нескольких элементов. Даже если при разработке блок один, никогда не угадаешь, возможно придётся добавлять примерно такой же блок где-нибудь еще на странице - в таком случае id дублировать нельзя - ошибка css.
Вообще, товарищи, используйте id никогда! Class куда удобнее и гибче (хотя бы в том плане, что для одного элемента можно задавать хоть 255 классов одновременно). Придумывались CSS-селекторы в конце 90х годов. Тогда HTML был совершенно на другом уровне, и разработчики смотрели в другую сторону. Им тогда хотелось управлять DOM с помощью JS методом GetElementByID - сейчас этот метод в чистом виде никто не использует. Есть жквери!
