La Herencia en CSS
source link: https://dev.to/lupitacode/la-herencia-en-css-6md
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
¡Hola gente bonita!👋
Hay una última manera en la que un elemento puede recibir estilos: la herencia. La cascada se confunde frecuentemente con el concepto de herencia. Aunque los dos temas están relacionados, debes entender cada uno por separado. Si quieres conocer sobre la cascada te invito a leer mi articulo de este tema:
👨👦 ¿Qué es la herencia?
Vamos a comenzar por una analogía que me gusta usar mucho.
Muchas veces los niños y niñas heredan rasgos de sus padres: el color de los ojos, el color del cabello, la estatura, etc. A veces heredamos rasgos de antepasados más lejanos, como abuelos o bisabuelos. La metáfora de las relaciones familiares también forma parte de la estructura del HTML. Y al igual que las personas, las etiquetas HTML pueden heredar propiedades CSS de sus antepasados.
Los descendientes (piense en hijos y nietos) heredan propiedades de los ancestros (piense en padres y abuelos).
La herencia es el proceso por el cual algunas propiedades CSS aplicadas a una etiqueta se pasan a las etiquetas anidadas.
Si un elemento no tiene un valor en cascada para una determinada propiedad, puede heredar uno de un elemento antecesor. Es común aplicar la propiedad font-family al elemento <body>. Todas las etiquetas descendientes de la etiqueta <body>, es decir, las que están dentro de la etiqueta <body> heredarán esta fuente y no es necesario aplicarla explícitamente a cada elemento de la página.
NOTA: Cualquier etiqueta dentro de otra etiqueta es descendiente de esa etiqueta. por ejemplo, una etiqueta <p> dentro de la etiqueta <body> es descendiente de <body>, mientras que la etiqueta <body> es un ancestro de la etiqueta <p>.
La herencia también funciona a través de múltiples generaciones. Si una etiqueta como <em> o <strong> aparece dentro de una etiqueta <p>, entonces las etiquetas <em> y <strong> también
heredan las propiedades de cualquier estilo aplicado a la etiqueta <body>.
La siguiente imagen muestra cómo la herencia fluye hacia abajo en el árbol del DOM. Las propiedades heredadas se transfieren por el árbol DOM desde los nodos padres a sus descendientes.
Como puedes notar en la estructura del árbol cada elemento solo tiene un padre directo.
❌ No todas las propiedades se heredan
La herencia no es todopoderosa, no todas las propiedades se heredan. Por defecto, sólo algunas, las que son principalmente propiedades que pertenecen al texto:
color, font, font-family, font-size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform,white-space, y word-spacing.
También se heredan algunas otras, como las propiedades de la lista:
list-style, list-style-type, list-style-position, y list-style-image.
Las propiedades del borde de la tabla, border-collapse y border-spacing, también se heredan. Tenga en cuenta que éstas controlan el comportamiento de los bordes de las tablas, NO las propiedades para especificar los bordes de los elementos que no son tablas. No queremos que un <div> pasara su borde a todos los elementos descendientes ¿Verdad?.
Como podemos ver la herencia no siempre se aplica, y eso NO es necesariamente algo malo. Para algunas propiedades, la herencia tendría un efecto negativo en la apariencia de una página. Los márgenes, el padding y los bordes (entre otras propiedades) no son heredados por las etiquetas y no es deseable que lo hagan. ¿Por que?
Mira el siguiente ejemplo:
<p> Lorem ipsum <em> dolor </em> sit amet. </p>
p {
padding-left: 20px;
border-left: solid red;
}
Observa que la etiqueta <p> tienen un borde a la izquierda. Sin embargo, la etiqueta <em> dentro de <p> no tienen ningún borde adicional. Este comportamiento tiene sentido: se vería raro o extraño si hubiera un borde adicional y 20px de espacio a la izquierda de cada etiqueta <em> dentro de un párrafo. Por este motivo es que la propiedad border no se hereda.
🤔 ¿Por que es importante la herencia?
Aunque esto pueda parecer confuso, la herencia es un gran ahorro de tiempo. Imagina que no se pasan las propiedades CSS a las etiquetas anidadas y que tienes un párrafo <p> que contiene otras etiquetas como una etiqueta <strong>, una etiqueta <em> para enfatizar el texto y una etiqueta <a> para añadir un enlace.
Si creas un estilo que haga que el texto del párrafo sea blanco y de 32px, sería raro y extraño que todo el texto dentro de las etiquetas <em>, <strong> y <a> tuvieran su estilo normal, tal y como se muestra en la siguiente imagen de muestra:
En ese caso, tendrías que crear otro estilo para dar formato a la etiqueta <em>, <strong> y <a> para que coincida con la apariencia de la etiqueta <p>. Qué tedioso. ¡Por eso esta la herencia y por eso es importante!
📚 Libros de CSS consultados para este tema:
- CSS in Depth
- CSS The Missing Manual
- CSS The Definitive Guide
Gracias por leer🦸🏻♀️
Mis redes sociales donde comparto notas de código:
▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK