Selectores ID

Como su nombre lo indica, los IDs sirven para asociar elementos únicos dentro del HTML que pueden ser manipulados, por ejemplo, con JavaScript. De hecho, al ser un elemento único es más rápido para el navegador encontrarlo para manipularlo como queramos, a diferencia de usar una clase, la cual puede estar repetida en varios lugares.

No queremos usar IDs para estilar un elemento ya que estaríamos cometiendo el error de asociar un mismo atributo de HTML al "cómo se ve" y "cómo funciona". Recordá que el mejor uso de los IDs es asociarlos al comportamiento de un elemento, excepto que este elemento este repetido entonces nuestra mejor opción son los JS Hooks.

Otra razón por la cual no queremos usar los IDs para estilar es que estos tienen un nivel de especificidad innecesario en el CSS, por lo que si necesitáramos cambiar cómo se ve el componente estilado con un ID en distintos media queries, estaríamos obligados a usar siempre ese ID.  Esto nos limitaría a la hora de pensar en componentes de CSS reutilizables (no olvidemos que como mencionamos antes, los IDs deberían ser para elementos únicos), dejando un CSS muy específico con líneas innecesarias de código y que luego lamentaremos si queremos reutilizar ese componente en otros lados.

Sería muy difícil pensar el siguiente CSS para un componente reutilizable que necesita algunos cambios para distintos dispositivos:

#main-container #title{
...some properties
}

Así que, recuerden siempre dejar que los IDs se asocien al comportamiento para poder estilar sin problemas a través de las clases, pensando en componentes que puedan ser reutilizados más de una vez siempre que lo necesiten.