Porque a finalidade do `id` é a de ser um **identificador único** para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido, e não faz sentido falar-se em exceções que possam permitir isso. Se você quiser usar um identificador que possa se aplicar a vários elementos diferentes simultaneamente, utilize o atributo `class`.

No entanto, isso não atrapalha no CSS:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    #teste {
        color: red;
    }

<!-- language: lang-html -->

    <div id="teste">Teste 1</div>
    <div id="teste">Teste 2</div>
    <div id="outro">Teste 3</div>

<!-- end snippet -->

Já no JavaScript, atrapalha:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    // Ok
    document.getElementById("outro").style="color:blue";

    // Só pega o primeiro elemento "teste".
    document.getElementById("teste").style="color:red";

<!-- language: lang-html -->

    <div id="teste">Teste 1</div>
    <div id="teste">Teste 2</div>
    <div id="outro">Teste 3</div>

<!-- end snippet -->

O mesmo acontece com o jQuery:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    // Ok
    $("#outro").css("color", "blue");

    // Só pega o primeiro elemento "teste".
    $("#teste").css("color", "red");

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="teste">Teste 1</div>
    <div id="teste">Teste 2</div>
    <div id="outro">Teste 3</div>

<!-- end snippet -->

Se o `id` se repete, o correto seria usar o atributo `class`:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    // Com jQuery.
    $(".outro").css("color", "blue");

    // Sem jQuery.
    var em = document.getElementsByClassName("teste");
    em[0].style="color:red";
    em[1].style="color:red";

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="teste">Teste 1</div>
    <div class="teste">Teste 2</div>
    <div class="outro">Teste 3</div>
    <div class="outro">Teste 4</div>

<!-- end snippet -->

Logo, conclui-se que ids repetidos atrapalha a manipulação do DOM, mesmo com uma biblioteca como o jQuery, mas não atrapalha a CSS.

Em outras linguagens de programação que são capazes de manipular o DOM, provavelmente vai dar errado também. Prova disso é que no Java, por exemplo, o tipo de retorno do [método `Document.getElementById(String)`](https://docs.oracle.com/javase/10/docs/api/org/w3c/dom/Document.html#getElementById(java.lang.String)) é `Element` ao invés de uma `NodeList`, ou seja um único elemento. Espere esse comportamento ou similar em todas as demais implementações de DOM em todas as demais linguagens de programação. Nenhuma delas vai saber lidar com `id`s duplicados.