¿Qué es?
El selector de ID se escribe con una almohadilla seguida del valor del atributo id (#nombre). A diferencia de las clases, un id debería ser único: cada valor solo debería usarse en un elemento por página. Por eso este selector, en la práctica, apunta a un elemento puntual y no a un grupo.
Ejemplo
<header id="main-header">
<h1>Mi sitio</h1>
</header>#main-header {
position: sticky;
top: 0;
background: white;
}Como #main-header apunta a un único elemento, este uso es razonable: cosas como el header principal, el contenedor raíz de la app, o un modal específico son buenos candidatos para un ID.
¿Por qué evitarlo para estilos generales?
El problema no es el selector en sí, sino su especificidad: un ID pesa tanto como diez clases juntas. Si empezás a usar IDs para estilar componentes normales, cualquier ajuste posterior con una clase va a fallar en silencio porque el ID siempre gana, obligando a usar !important o más IDs para poder pisarlo.
#card {
color: red;
}
/* Esto NO pisa al selector de arriba, aunque esté después
y parezca más específico visualmente */
.card.card--success {
color: green;
}1-0-0, la más alta de los selectores "normales" (por debajo solo quedan los estilos inline y !important). Usalo para anclas de JavaScript o para elementos verdaderamente únicos en la página, y dejá las clases para todo lo que sea estilo visual reutilizable.