oppure ci sono "conflitti" tra id e classe visto che hanno nomi uguali?
Se usi solo HTML e CSS la cosa probabilmente funziona.

Pero` con quel codice stai dando due nomi uguali a due oggetti diversi (l'oggetto <div> - con id="rosso" - e la classe - con class="rosso").

Il problema potrebbe saltar fuori in qualche browser al momento in cui si volessero utilizzare i nomi per qualcos'altro. Ad esempio potresti voler manipolare qualcuno degli oggetti, come aggiungere un attributo alla classe, o spostare il tuo div (cose che si possono fare tramite JS). A quel punto potrebbero sorgere conflitti, con risultati imprevedibili.

E comunque mi pare un po' masochistico aumentare la confusione: di solito il problema ce l'hanno poi i programmatori, non le macchine.