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. 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.