La herencia y cascada de CSS

CSS es el lenguaje de estilo para la Web, sin CSS no hay estilo. La traducción de CSS es  Hojas de Estilo en Cascada (por sus siglas en inglés Cascade Style Sheet). CSS por naturaleza usa la cascada, pero, ¿Cuál es la diferencia entre la herencia, la cascada y la importancia de CSS?

Primero vamos a definir:

Herencia en CSS:

Funciona muy similar a la herencia en los seres humanos, es es conjunto de características que los padres “regalan” a los hijos. Color de tez, ojos, gestos y gustos. No todo, se heredan algunas características. CSS es igual. Hereda de las características de un contenedor a su contenido. No todo, algunas características.

Herencia en CSS

 

 

 

 

 

 

 

Cascada en CSS:

CSS es increíble y en su especificación # 3 ha logrado muchas cosas que hace algunos años eran muy difíciles. Pero como todo debe llevar un orden. La cascada no es más que el orden de las claves y valores asignados a los elementos, id o clases.

Debemos ser cuidadosos de no “sobreescribir” una regla con otra. Considera esto sobre todo si estás utilizando preprocesadores como Saas, cuando hagas los @import estos pueden sobrescribir valores que no deseas que sean modificados.

Cascada en CSS

Por la Cascada la línea 94 será sobreescrita por la línea 100

Importancia en CSS:

!import sirve para decir: Hey CSS en la línea 80 dije que el border-radius era de 5px pero aquí en la línea 90 dije (por razones desconocidas, quédate conmigo y te explico esto) que debe ser de 8px, pero no lo cambies dejalo en 5px y yo te cuento cuando lo necesite de 8px.

Esto puede ser muy confuso, mucho. Por lo mismo debes ser muy ordenado en tu CSS. Ahora ¿Por qué querría sobreescribir una regla? puede que estés escribiendo clases que comparten características pero un botón, un cuadro, un borde es diferente y es ahí donde se usa el !import.

Sin embargo, creo que el !import es solo una muestra que la lógica de tu CSS tiene algo mal. usar el !import es decir: no sé por qué existen las reglas, solo haz esto!.

important en CSS

Usar el important es señal de que algo no se ha escrito bien.

Especificidad

La profe Estefany Aguilar comparte un hilo interesante acerca de especifidad. Hay una tabla para «medir» la especificidad y la idea es que no debiéramos usar mucha «especificidad». Nuestras reglas de CSS deben ser claras, simples, escalables. Considera siempre si la regla que estás dictando es muy, muy específica, ¿no será mejor usar una clase?

Especifidad en CSS

Entre menos «Específico» es mejor.

¿Cómo escribir CSS?

Metodologías escalables, CSS ordenado, claro, simple. Revisa BEM como metodología. Además puedes explorar frameworks CSS como Bootstrap, Bulma (que según el estado de CSS es toda una revolución) y foundation.

Si tienes un orden a la hora de escribir tus reglas, ya sea por medio de preprocesadores o por medio de CSS puro, si estableces la prioridades, si usas reglas claras, es muy probable que uses muchas clases de CSS y los ID sean casi exclusivos de invocaciones de JS o PHP (Casi!)

En resumen:

Tener claro que hay una herencia por naturaleza en CSS nos puede ayudar a entender que ciertos comportamientos. Usar la cascada nos ayudará a reescribir la herencia o heredar intencionalmente.

Saber que el orden de nuestro CSS puede dar resultados poco deseados, también nos ayuda a escribir un CSS más limpio, ordenado, reutilizable y escalable.