Info Selector CSS duplicado
Por qué dividir los estilos del mismo selector en varios bloques de regla hace el CSS más difícil de razonar, y cómo combinarlos.
El validador marca un selector que se declara como su propio bloque de regla más de una vez en la misma hoja de estilos.
Ejemplo
/* Dividido en dos bloques */
.tarjeta { padding: 1rem; }
.tarjeta { border-radius: 8px; }
/* Combinado */
.tarjeta {
padding: 1rem;
border-radius: 8px;
}Por qué importa
Nada en CSS impide que el mismo selector aparezca más de una vez — cada bloque se aplica de forma independiente, en el orden del código fuente, exactamente como si se hubieran combinado. Pero dividirlos hace que el conjunto completo de estilos del selector sea más difícil de ver de un vistazo: para saber todo lo que hace .tarjeta, ahora hay que encontrar cada bloque disperso en vez de leer uno solo. También es una forma fácil de anular accidentalmente una declaración anterior — un bloque posterior que redeclara la misma propiedad gana, en silencio, sin nada que parezca un conflicto en ninguna de las dos ubicaciones. Esto pasa sobre todo cuando una hoja de estilos crece agregando reglas nuevas al final en vez de editar el bloque existente de un selector.
Frequently asked questions
¿Esto alguna vez es intencional?
A veces — por ejemplo, una regla base cerca del inicio de la hoja de estilos y una pequeña anulación más adelante protegida detrás de una media query o una diferencia de especificidad. Ese es un patrón legítimo, por eso esta revisión es informativa en vez de un error; es un aviso para verificar, no una regla estricta.
¿Esto detecta el mismo selector dentro y fuera de un bloque @media?
Compara solo el texto del selector, no el contexto que lo rodea, así que un selector repetido una vez en el nivel superior y otra vez dentro de @media también se va a marcar — eso es un patrón normal y común (anulaciones responsivas), así que trata esta revisión como una pista en vez de una violación estricta en ese caso.