A mi parecer, entre las 2 formas que propones la más correcta es la primera. Es más mantenible en el tiempo, ya que cualquier cambio a .clasedos
se realiza en un solo lugar. La segunda alternativa es una solución parche, algo que se hace para sobrescribir algo ya existente, digamos que uso bootstrap y quiero hacer pequeños cambios a una clase, bueno la piso y ya, no me voy a complicar compilándolo nuevamente por un par de líneas. Es decir, para mí, es solo un recurso de último minuto.
Técnicamente debería ser más rápido no pisar la instrucción, ya que es algo menos que debe validar el algoritmo de especificad. Pero en la práctica, a menos que el sitio sea un desastre, no debería haber diferencia alguna, pero yo he visto este problema en Wordpress con Elementor, donde se llega a pisar y pisar reglas de CSS a tal extremo que llega a notarse un pobre rendimiento
De todos modos, hay distintas visiones de cómo tratar el CSS. Y al menos 2 son bastantes contrapuestas. Están los que los que utilizan clase utilitarias, y en el HTML van colocando clases como si de un Lego de tratase, por ejemplo:
.clasecero{
display:flex;
color:red;
}
.claseuno{
font-size:10rem;
margin-top:20rem;
}
.clasedos{
font-size:33rem;
margin-top:44rem;
}
<div class="clasecero claseuno"></div>
<div class="clasecero clasdos"></div>
La otra es pensar el problema en modo semántico, los elementos son componentes y representan "algo" visible. En lo personal prefiero esta manera, me obsesiona tener poco código en el HTML
.tarjeta{
display:flex;
color:red;
font-size:10rem;
margin-top:20rem;
}
.tabla{
display:flex;
color:red;
font-size:33rem;
margin-top:44rem;
}
Aquí no importan si se repiten, porque conceptualmente tarjeta
y tabla
son cosas distintas e independientes entre sí, el día de mañana yo puedo querer cambiar una y no la otra. Y sé que cuando quiero cambiar el estilo de tarjeta
tengo que ir a su clase y punto. Evidentemente, pueden existir elementos comunes que se relacionan con el -theme-, por ejemplo el color, tamaño de fuente e incluso márgenes, esto se manejan con variables var(--algo)