Q:

Dúvida sobre atribuição de classes e ids

Existe alguma boa prática que orienta a ordem que devo definir o id e a class de um elemento HTML? Sei que tanto faz a ordem para o navegador renderizar, mas existe algum guia de estilo de código para isso?

A:

Segundo a documentação que está nesse Guia de Boas Práticas da Mozilla, o ID deve vir depois da class:

As classes são ótimos componentes reutilizáveis, então elas vêm em primeiro lugar. Os IDs são mais específicos e devem ser usados ​​com moderação (por exemplo, para bookmarks in-page), então eles vêm em segundo lugar.

<a class="..." id="..." data-toggle="modal" href="#">
    Example link
</a>

Fonte: https://codeguide.co/#css-shorthand
Então, basicamente a Mozilla diz que como o ID é mais específico ele deve vir por último. Mas isso não é regra, é uma recomendação deles. 
Já o Bootstrap por exemplo, que é um Framewrok gigante e super popular parece não ter um padão, algo estranho ao meu ver... Para eles o ID vem primeiro em alguns componentes, e depois em outros...
Por exemplo, repare que nas tags iniciais do Carroussel o ID vem primeiro, enquanto que na tag do Modal a Classe é que vem primeiro, e os dois são componentes do mesmo Framework.
Tag inicial do Carrossel https://getbootstrap.com.br/docs/4.1/components/carousel/:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">

Tag inicial do Modal https://getbootstrap.com.br/docs/4.1/components/modal/:
<div class="modal fade" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Eu não considero isso uma boa prática, o ideal seria adotar alguma regra para facilitar a manutenção e leitura do código.

Recomendação da Google: Não há recomendação :)
No Guia de Estilos da Google esse assunto de ordem dos atributos na tag nem é mencionado... https://google.github.io/styleguide/htmlcssguide.html

