Exercício https://cursos.alura.com.br/course/html-css-responsividade-mobile-first/task/127012

Oi Célio! Tudo bem com você?

Na verdade, eu acabei de testar aqui invertendo a ordem e realmente funciona. Contudo, a ideia dos exercícios é fixar a lógica que a pessoa instrutora está tentando passar no curso. E quando a pessoa instrutora está construindo o código e pesquisando maneiras de passar seu conhecimento adiante, normalmente essa pessoa busca seguir a maioria das convenções da comunidade, e passar as boas práticas pensando em já acostumar a pessoa estudante com o que o mercado Tech busca.

Portanto, aqui, a ideia do exercício foi "Primeiro temos que posicionar o menu e fazer ele sumir, depois que temos todo o cenário/palco pronto para a execução da parte visual, então vamos adicionar o mecanismo lógico que vai fazer ele aparecer e vice-e-versa!".

Pois se você parar para pensar isso faz sentido, eu deixar os códigos que preparam o cenário para depois fazer as estilizações e mecanismos lógicos. Isso se pensar que, se inverter a ordem (nesse contexto) o programa vai ver essa parte:

.container__botao:checked~.lista-menu {
  display: block;
}

E vai só ignorar, porque o display da tag por padrão já é aquele. Então ele só ignora essa parte, e depois chega nessa:

.lista-menu {
  display: none;
  position: absolute;
  top: 100%;
}

Aqui ele vai fazer as mudanças, mas sempre que isso .container__botao:checked for verdadeiro, o programa vai precisar ler todos os estilos CSS até chegar na parte certe, para só então, poder entender o que fazer.

E isso dependendo da escala e do tipo da aplicação pode pesar muito o servidor, bem como o Browser (Não é o caso aqui, mas só para você ter uma ideia de como isso pode aferar uma aplicação).

Em suma, era isso. Se precisar estarei por aqui!

Espero ter esclarecido o porquê o exercício só tem uma opção de resposta.

Abraços e bons estudos.