This content originally appeared on DEV Community and was authored by Osvaldo Ocampo

En este artículo, exploraremos dos conceptos clave de CSS3 que todo diseñador de layouts y desarrollador front-end debería dominar: especificidad y herencia. Estos fundamentos son esenciales para entender cómo se aplican los estilos y cómo controlar su comportamiento en diferentes elementos de nuestra página.

Especificidad

La especificidad determina qué tan "específico" es un selector para decidir qué estilo se aplicará. Esta se calcula con un valor numérico basado en el tipo de selectores que estamos usando:

• Etiquetas y pseudoelementos: valor de 001
• Clases, atributos y pseudoclases: valor de 010
• IDs: valor de 100
• Estilos en línea: valor de 1000
• !important: sobreescribe todo, por lo que se recomienda evitarlo para no romper la especificidad.

Ejemplo de especificidad:

En este caso, el cálculo de especificidad es 111, obtenido al sumar:

h1 (etiqueta) = 001
.title (clase) = 010
#title (ID) = 100
Total = 111

Cuanto mayor es el número, mayor es la especificidad, y esto permite que un selector tenga más peso que otro sin importar el orden en la hoja de estilos (o cascada).

Nota: La cascada funcionará siempre que la especificidad de los selectores sobre el mismo elemento sea igual. Es por esto que se recomienda utilizar clases para mantener la especificidad manejable y evitar conflictos.

Existen herramientas que nos ayudan a analizar la especificidad en nuestro código, por ejemplo:

- CSS Specificity Graph Generator

Si observamos picos altos en los gráficos de esta herramienta, es una señal de que la especificidad podría estar siendo mal gestionada.

- Specificity Calculator

Solo coloca tu selector y de una manera visual, podras conocer a cuanto equivale su especificidad.

• Visual Studio Code también permite conocer la especificidad de tus selectores. Solo necesitas posicionarte sobre el selector que quieres revisar, y la herramienta te mostrará qué tan específico es.

Herencia

La herencia en CSS es la capacidad de ciertos elementos para "heredar" propiedades de sus elementos contenedores. Esto significa que algunos estilos aplicados a un elemento contenedor se transfieren automáticamente a sus descendientes.

Por ejemplo, en el siguiente código, el elemento dentro de

hereda los estilos de la etiqueta h1, mientras que el fuera de h1 no los hereda:

Propiedades que se heredan comúnmente:

• color
• Todas las propiedades relacionadas con la fuente (como font-family, font-size, etc.)

Nota: Los enlaces () no heredan automáticamente estilos de color de sus elementos padres, ya que suelen tener un estilo distintivo por defecto. Para aplicar estilos heredados en ellos, podemos utilizar una clase específica o el valor inherit.

Para forzar la herencia en propiedades que normalmente no la tienen, se utiliza el valor inherit:

En casos donde queramos que un elemento ignore una propiedad heredada, podemos restablecerla a su valor inicial usando initial:

Estos fundamentos te permitirán controlar cómo se aplican los estilos en tu página, logrando un diseño más limpio y profesional. En el próximo artículo, profundizaremos en otras propiedades importantes de CSS3 para mejorar aún más nuestra comprensión y manejo de estilos en proyectos web.

This content originally appeared on DEV Community and was authored by Osvaldo Ocampo