CSS - El !important es de cobardes

Fuera !important

Estamos en 2022, casi 2023, no es necesario. Sólo tenéis que saber tres pequeñas palabras para evitar usar esa palabra del demonio que nos trae más problemas que bondades, y, es que, encima, sólo necesitaréis dos de ellas la mayoría del tiempo.

1. unset
2. revert
3. all

Y ya está. Vamos a ver las diferencias, pero tampoco son muy importantes aunque está bien explicarlas.

Ejemplo general:

.element {
  all: unset;
  display: revert; // Si queremos algo específico.
}

Aplicando unset:

1. Cualquier propiedad heredada (normalmente basada en texto, como la fuente o el color, etc.) que hayas asignado a tu elemento a través de las hojas de estilo se elimina y se le asigna un valor inherit, heredado, y los estilos de cualquier padre por encima del elemento pasan ahora a él a través de la herencia normal. Los que asignaste directamente o cambiaste a través de estilos personalizados se eliminan y se sustituyen por estos valores heredados a través del valor inherit, heredado, que ahora se les asigna.
2. Los valores de las propiedades no heredables (como display o border, etc.) que asignaste a tu elemento a través de hojas de estilo se eliminan del elemento y se les asignan los valores que se encuentran en la hoja de estilo por defecto del navegador.
3. Si además, usamos revert en lugar de unset, intentará eliminar los estilos por defecto del navegador incluso. En un div, en lugar de dejar un display: block, dejará display: inline

Resumen: Primero, unset. Si nos queda alguno por quitar, revert. Y empezamos a dar estilo desde aquí. Tabula rasa.