¿Qué hace como tal poner id y class en una misma etiqueta aparte de aportar la especificidad? O solo se usa para eso, para darle prioridad?

Hola!

No es tanto para darle mayor especificidad.

Es más que todo porque los IDs se usan para darle interactividad a los elementos de HTML usando JavaScript y las clases se usan para darles estilos en CSS a los elementos de HTML (Por lo general es así.)

Varios elementos puede tener la misma clase pero el Id es único, por eso en CSS se usaría el Id para ser muy especifico y en JavaScript para acceder al elemento HTML (A sus atributos y propiedades)

Y las clases son principalmente para CSS dado que tienen menor especificidad que un Id, pero también puedes acceder a varios datos al tiempo mediante clases con JavaScript.

Si solo vas a usar HTML y CSS pues solo necesitarás Clases pero si usarás JavaScript o ciertos estilos que si o si no cambiaran, por así decirlo, usa Id

Creamos 3 cajas, quiero que tengan características similares como el tamaño, margin y un borde, pero que cada caja sea de un color diferente, esto lo puedo lograr con ids.

     <div class="cajas" id="caja_amarilla"></div>
     <div class="cajas" id="caja_roja"></div>
     <div class="cajas" id="caja_negra"></div>

        .cajas{
            width: 100px;
            height: 100px;

            border: 1px solid black;
            margin: 10px;
        } //para todos los divs que tengan la clase [cajas]

        #caja_amarilla{
            background-color: yellow;
        }
        #caja_roja{
            background-color: red;
        }
        #caja_negra{
            background-color: black;
        }