Palabras clave en CSS: "initial","inherit","unset" y "revert"🐱‍🏍
Tags: css, spanish
Published: 2021-08-12 00:55:23

¡Hola gente bonita!👋

CSS tiene "Global Keywords" o palabras clave por defecto. En este artículo voy a hablar de cuatro de ellas: `initial`, `inherit`, `unset` y `revert`.

También se les conoce como palabras clave de restablecimiento de CSS porque nos permiten restablecer el CSS como queramos. Vamos a repasarlas:

## initial

Cada propiedad de CSS tiene un valor inicial. Este valor inicial no tiene relación con el tipo de elemento HTML al que se aplica.

Por ejemplo, el valor por defecto de `font-weight` es `normal` Esto lo podemos comprobar con la documentación de la MDN en el cual se nos especifica los valores iniciales de cada propiedad:

![Valor inicial de font-weight es "normal"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6z57wl5ws4v1jiyvzf5i.jpg)

Entonces al declarar `font-weight: initial`, es lo mismo que declarar: `font-weight: normal`. Veamos otro ejemplo:

```
.foo{ 
   position: absolute; 
   top: 20px; 
   left: 20px;
}
.bar .foo{   
   position: initial;  /* = static */
   top: initial;       /* = auto */
   left: initial;      /* = auto */
}
```

🧠 Recuerda, la palabra clave `initial` establece el valor de una propiedad CSS al valor inicial definido, lo que en cierto modo significa que "restablece" el valor. 

Curiosamente todos los elementos HTML utilizan la propiedad display con el valor `inline`. Recuerda que que cada propiedad en CSS tiene sólo un valor por defecto y para la propiedad display, el valor inicial es siempre `inline`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyzcy1vcpod2hx3ph7f0.png)

Si reseteamos la propiedad `display` en un elemento HTML cuyo valor por defecto es `block`, como el elemento `<div>`, esto nos devolverá al valor `inline`. ¡Vamos a comprobarlo!

```
div{ 
   display: block; /* browser default styles */
}

div {
    display: initial; /* es igual a inline */
}
```
Ahora la pregunta que debemos hacernos es: ¿Por qué el elemento HTML `<div>` es un elemento de bloque o se comporta con el valor display: block?
La respuesta está en el user-agent-stylesheet (hoja de estilo) del navegador.

Cuando creamos páginas web, el navegador carga su propia hoja de estilos CSS antes de que carguemos una sola línea de CSS, esto quiere decir, que cada navegador viene con cierta cantidad de CSS por defecto que llamamos user-agent-stylesheet.

Entonces todos los elementos HTML que por defecto tienen un valor de block, esto es sólo porque el navegador decide añadirles la propiedad display con un valor de block. Si inspeccionamos el elemento `<div>` tiene el valor de block por esta razon:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pte474ifn3wwd03hskwu.png)

Esto quiere decir que muchas etiquetas HTML tienen asignado estilos CSS del navegador aunque no lo hayas especificado.

Todos los elementos tienen establecido un valor de la propiedad `display` que puede ser `inline` o puede ser `block` gracias a la hoja de estilo del navegador.

La única razón por la que tenemos esas diferencias entre los distintos tipos de elementos HTML (block vs inline) es porque el navegador carga su propio CSS.

Para tener una idea de como es la hoja de estilo de cada navegador (Chrome, Firefox) en los recursos de este articulo dejare los enlaces para que les des un vistazo.

Sin embargo, NO todas las propiedades tienen valores iniciales definidos explícitamente. Por ejemplo, el valor inicial de la propiedad `color` es "depende del agente de usuario". Lo que significa es que el valor por defecto del color depende de cosas como la configuración de las preferencias del navegador:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te2hh1vpz396knmo8jcn.jpg)

La mayoría de los usuarios no cambia la configuración del color del texto, pero alguien podría establecerlo a un gris o incluso un rojo. Al declarar `color: initial;` le estás diciendo al navegador que establezca el color del elemento a cualquier color que establezca el usuario.

###🌐 Los estilos del navegador

Después de aplicar los estilos iniciales de todas las propiedades CSS, el navegador carga sus estilos. Estos estilos del navegador no tienen nada que ver con los valores iniciales de las propiedades CSS.

Aquí hay un ejemplo de los estilos del agente de usuario aplicados a la etiqueta `<h1>`. Si inspeccionas el elemento con la DevTools podrás ver lo siguiente:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wel4s54y0ot4fu9xhpn8.jpg)

Fíjate en la propiedad `font-weight` aplicada al `<h1>`, ¿te has dado cuenta que su valor es `bold`? Como te mencione al principio el valor inicial por defecto de la propiedad `font-weight` es `normal`, lo que nos quiere decir que los estilos del `<h1>` son estilos del navegador.

Tienes que recordar y comprender que: ¡Los elementos HTML no tienen valores de estilo iniciales! Los estilos básicos de un elemento HTML, como la etiqueta `<h1>` por ejemplo, provienen de la hoja de estilos del agente de usuario del navegador, y no del valor inicial de las propiedades de CSS.

Para entender la palabra clave `initial`, tenemos que recordar un dato importante: Cada propiedad en CSS tiene un valor por defecto, que no tiene nada que ver con el valor por defecto del agente de usuario. Los estilos del agente de usuario son los estilos básicos que el navegador aplica a los elementos HTML en el navegador. Tendemos a pensar que vienen automáticamente con el HTML, pero no es así.

## inherit

La palabra clave `inherit` (heredar) hace que el valor de una propiedad en un elemento sea el mismo que el valor de su elemento padre. 

El valor inherit obliga a que la herencia se produzca incluso en situaciones en las que normalmente no funcionaría. 

El proceso ocurre de la siguiente manera:

1. La palabra clave `inherit` le dice al navegador que busque el valor del elemento padre más cercano y que el elemento actual herede ese valor. 

2. Si el padre más cercano también tiene el valor `inherit`, el navegador continuará subiendo por el DOM hasta encontrar algún valor. 

3. Si no hay ningún valor, el navegador utilizará su estilo de agente de usuario, y si no hay ningún estilo de agente de usuario, utilizará el estilo base inicial o el valor inicial que ya vimos arriba.

Vamos a ver el siguiente ejemplo:

```
<nav class="toolbar">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>
```
```
.toolbar {
  background-color: blue;
  color: white;
}
```
El `nav` tendrá un fondo azul, pero los enlaces tendrán otro estilo acorde con la configuración de preferencias del navegador. 

Puede escribir una regla que establezca explícitamente que los enlaces sean de color blancos pero puede hacer que las cosas sean un poco más robustas usando `inherit`. Sólo tiene que añadir la siguiente regla a la hoja de estilos:

```
.toolbar {
  background-color: blue;
  color: white;
}
.toolbar a{
  color: inherit;
}
```
Esto hará que los enlaces utilicen el valor heredado del color en lugar de los estilos por defecto del agente de usuario.

Como dije al principio podemos hacer que la herencia se produzca incluso en situaciones en las que normalmente no funcionaría, por ejemplo la propiedad `padding` por defecto, no se puede heredar pero podemos hacer que si se herede, seguiremos con el ejemplo anterior:

```
.toolbar {
  padding: 20px;
}
.toolbar a{
  padding: inherit;
}
```
En este caso todos los enlaces heredaran el valor de la propiedad `padding` del elemento padre, a pesar de que dicha propiedad no se herede por defecto.

En muchos casos, no es necesario especificar la herencia, ya que muchas propiedades se heredan de forma natural. Sin embargo, heredar puede ser muy útil.

En cualquier caso, así es como funciona la palabra clave inherit. Usarla para el font-size o el color puede ser en ocasiones una buena idea. En otros contextos - raramente.

Y toma en cuenta la diferencia entre propiedades heredables y no heredables. Será importante más adelante.

## unset

La palabra clave `unset` actúa como un sustituto universal tanto de `inherit` como de `initial`.  
El valor `unset` restablecerá automáticamente el valor de una propiedad según el **tipo de propiedad**.

Recordemos que en CSS, hay dos tipos de propiedades:

1. Propiedades heredadas: Si la propiedad es heredada, entonces `unset` tiene el mismo efecto que si se usara `inherit`.

2. Propiedades no heredadas: Si la propiedad no se hereda, entonces `unset` tiene el mismo efecto que si se usara `initial`.
El valor `unset` funcionará igual que el valor inicial `initial`, es decir, aplicará el valor por defecto de CSS.

Por ejemplo, `position: unset` será igual a `position: initial` porque es una propiedad no heredada.
Pero cuando usamos el valor `unset` en la propiedad `font-size`, por ejemplo, `font-size: unset`, será igual a `font-size: inherit` porque `font-size` es una propiedad heredada.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnadxxu0mtubtd3vr1wo.png)

```
.element * { 
    /* inherit properties */
    font-size: unset; 
    font-weight: unset;
/* non-inherited properties */
    border-width: unset; 
    background-color: unset;
}

/* work the same way as */

.element * { 
    /* inherit properties */
    font-size: inherit; 
    font-weight: inherit;
/* non-inherited properties */
    border-width: initial; 
    background-color: initial;
}
```

Veamos otro ejemplo:

```
.some-class{ 
   color: unset; /* will be equal to 'inherit' value */ 
   display: unset; /* will be equal to 'initial' value*/
}
```

### 🤔 ¿Por qué utilizar unset si funciona exactamente igual que Inherit e Initial?

Si unset actúa como initial y inherit, ¿por qué querríamos usar unset?

Si sólo estamos restableciendo una propiedad, entonces unset es innecesario: podemos usar los valores inherit o initial en su lugar.

Pero hoy en día tenemos una nueva propiedad llamada all que trae consigo una nueva capacidad: ¡restablecer todas las propiedades heredadas y las no heredadas a la vez!
De esta nueva manera, no es necesario restablecer las propiedades una por una. Así, aplicando el valor "unset" a la propiedad "all" se restablecerán todas las propiedades heredadas a "inherit" y todas las no heredadas a "initial".

¡Esta es la única razón de la existencia del nuevo valor de la palabra clave unset! De lo contrario, podríamos utilizar los valores inherit e initial en su lugar.

En lugar de restablecer las propiedades una por una, por ejemplo:

```
/* Bad */
.common-content *{ 
    font-size: inherit; 
    font-weight: inherit;
    border-width: initial; 
    background-color: initial;
}
```
Podemos utilizar la nueva propiedad all con el valor unset, que afectará a todas las propiedades existentes, por ejemplo:

```
/* Good */
.common-content *{ 
    all: unset;
}
```

## revert

Pero, ¿Qué pasa si queremos restablecer los estilos de la propiedad a su estilo original del agente de usuario y no al estilo base de la propiedad? Por ejemplo, ¿revertir la propiedad display de un elemento `<div>` a `block` (su estilo de agente de usuario) y no `inline` (su estilo base CSS)?

Para ello, pronto tendremos una nueva palabra clave CSS: `revert`. La palabra clave `revert` es muy similar a unset, con la única diferencia de que prefiere los estilos del agente de usuario al estilo básico de la propiedad CSS. 

Ya hemos hablado de los estilos base de CSS y de los estilos de agente de usuario del navegador. Los estilos base de CSS son los valores por defecto de las propiedades de CSS. Son los valores naturales por defecto que vienen con las propiedades.
Los estilos del agente de usuario del navegador son los valores establecidos por el navegador. Cuando se carga una página, el navegador tiene sus estilos para algunas propiedades CSS.

Por ejemplo, la propiedad display (que ya te explique anteriormente cuando mencione el valor initial), tiene un valor base CSS, que es inline. Este es su valor natural del motor CSS. Ahora, el navegador cambia el estilo de la propiedad display a block.

El estilo del navegador no es más que añadir sus propios archivos css. La palabra clave revert, invierte los valores por defecto de CSS a los estilos del agente de usuario del navegador.

La palabra clave `revert` nos permite volver al estilo por defecto del navegador, el "User-Agent-Stylesheet". Por ejemplo:

```
 div{
    display: revert; /* = block */ 
 }
 h1{ 
    font-weight: revert; /* = bold */ 
    font-size: revert; /* = 2em */
 }
```
De esta manera, si queremos restablecer todos los estilos de una etiqueta HTML al estilo base del navegador, podemos hacerlo así:

```
 /* Good */

 .element *{ 
    all: revert;
}
```

## El nuevo reset del futuro

El experto en HTML y CSS Elad Shechter nos comparte en su cuenta de Twitter “The CSS Reset of the Future”. En el cual nos muestra una nueva forma de crear un reset, utilizando la propiedad all y los valores unset y revert.

{% twitter 1413106994454614018 %}

Quizás estarás pensando que utilizar un reset es una mala practica en estos días y esto sucede porque lo confundes con Normalize y el reset de 2007 de Eric Meyer que se utilizaba años antes. Pero tienes que conocer las diferencias entre un reset CSS y normalize. En los recursos de este post te dejare un articulo de Elad Shechter para que conozcas las diferencias.

##🔎Recursos:

* [Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords | Elad Shechter](https://elad.medium.com/understanding-the-initial-inherit-and-unset-css-keywords-2d70b7121695)

* [The New CSS Reset | Elad Shechter](https://elad2412.github.io/the-new-css-reset/)

* [How Does CSS Work? | Elad Shechter](https://elad.medium.com/how-does-css-work-92fe7116916d)

* [CSS inheritance: inherit, initial, unset, and revert](https://blog.logrocket.com/css-inheritance-inherit-initial-unset-and-revert/)

* [Inheritance | Learn CSS](https://web.dev/learn/css/inheritance/)

* [Normalize CSS or CSS Reset?! | Elad Shechter ](https://elad.medium.com/normalize-css-or-css-reset-9d75175c5d1e)

* [Inherit, initial, unset, revert ](https://www.quirksmode.org/blog/archives/2021/06/inherit_initial.html)

* [BODY MARGIN 8PX ](https://www.miriamsuzanne.com/2022/07/04/body-margin-8px/)

* [Resetting Inherited CSS with “Revert”](https://cloudfour.com/thinks/resetting-inherited-css-with-revert/)

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

[▶️Youtube](https://www.youtube.com/lupitacode)
[📷Instagram](https://instagram.com/lupitacode)
[🐦Twitter](https://twitter.com/lupitacode)
[🔵Facebook](https://facebook.com/lupitacode)
[🔲Codepen](https://codepen.io/lupitacode/)
[✍️Medium](https://lupitacode.medium.com/)
[🎵Tik Tok](https://www.tiktok.com/@lupitacode)