Cascada CSS: ¿Qué es y como funciona?

La cascada CSS es un principio fundamental que rige cómo se aplican y priorizan los estilos en una página web. En este artículo, exploraremos en detalle qué es la cascada CSS y cómo influye en la presentación de nuestras páginas. Además, analizaremos la importancia de la especificidad, el orden y la herencia en el proceso de estilización, con ejemplos prácticos para clarificar su aplicación en el desarrollo web.

Sigue las palabras fuertes si quieres un resumen de todo el artículo.

1. ¿Qué es y para que sirve la cascada en CSS?

El modelo en cascada de CSS, también conocido simplemente como cascada, es el algoritmo que utilizan los navegadores web para determinar qué reglas CSS se aplican a cada etiqueta HTML cuando hay declaraciones conflictivas (es decir, más de una regla que asigna valores diferentes a la propiedad de un elemento).

1.1. Ejemplo simple para entender para que sirve este método cascada CSS:

A continuación dejamos un ejemplo sencillo para entender la lógica de como funciona el método cascada CSS:

1. Supongamos que tenemos un elemento HTML en una página web con un selector CSS de clase. Por ejemplo:

<p class="prueba">Lenguaje del código: JavaScript (javascript)

2. Y a dicho elemento HTML le queremos dar un estilo CSS (como un tamaño de letra especifico) con un archivo externo.
3. Ahora, en el archivo CSS, tenemos dos selectores que le dan dos tamaños de letra distintos, y dichos dos selectores aplican estilo a ese elemento HTML de <p class="prueba">. Por ejemplo:

p {fotn-size: 18px;}

p.prueba {font-size: 22px;}Lenguaje del código: CSS (css)

4. Como podemos ver, ambos estilos CSS aplican al elemento HTML del primero ejemplo. Entonces la pregunta sería ¿Cuál de estos dos estilos CSS se terminarán aplicando al elemento HTML de <p class="prueba">?
5. Aquí es donde entra en juego la cascada CSS, ya que este método es el encargado de especificar cual de estas dos reglas CSS es la que prevalecerá.
6. En este ejemplo gana la regla CSS del selector p.prueba debido a que tiene un grado de especificidad mayor. En los siguientes puntos iremos ampliando estos conceptos.

Aquí acabamos de dejar un ejemplo sencillo para entender su lógica, y antes de ampliar como es que funciona concretamente este método de cascada CSS (para entender su lógica en casos mas complejos), déjame darte algunos conceptos importantes relacionados con este método para una mayor comprensión de su funcionamiento.

2. Características importantes del método cascada CSS.

Como dijimos, antes de entrar de lleno a explicar como funciona este sistema de cascada CSS, deberíamos conocer algunos conceptos importantes que nos ayudarán a entender mejor la finalidad de este sistema.

Estas características de la cascada CSS son:

1. Especificidad CSS:
2. Orden en CSS:
3. Herencia en CSS:

2.1. Especificidad CSS:

Este es un mecanismo fundamental, la especificidad se encarga de determinar qué estilo se aplica a un elemento HTML cuando existen varias reglas CSS que podrían aplicarse simultáneamente.

Imagina que tienes dos o más reglas CSS que apuntan al mismo elemento. La regla con mayor especificidad «gana» y su estilo se aplica al elemento. Es como un sistema de clasificación que prioriza las reglas más precisas sobre las más generales.

2.1.1. ¿Y cómo calculo el grado de especificidad en CSS?

Para calcular el grado de especificidad de una regla CSS, se utiliza un sistema de puntuación que asigna valores a cada componente del selector. La suma de estos valores determina la especificidad total de la regla.

Los valores que corresponden a cada selector son:

1. !important: (Tiene un peso de  1, 0, 0, 0, 0)
   • Reescribe cualquier estilo.
   • Para el navegador es de alta prioridad.
   • Hay que evitarlo o usarlo con mucha precaución.
2. Estilos en línea (style): (Tiene un peso de  0, 1, 0, 0, 0)
   • Los estilos en línea aplicaran estilos nuevos sobre otros, aunque ya tengan clases o IDs.
3. #ID: (Tiene un peso de  0, 0, 1, 0, 0)
   • Los ID tienen mayor peso que las clases y etiquetas.
   • Pero al ser únicos es preferible usarlos para funcionalidad que para estilos.
4. .Clases, atributos y pseudo clases: (Tienen un peso de  0, 0, 0, 1, 0)
   • Es mejor usar clases para dar estilos, combinados con una metodología como BEM tendrás una especificidad manejable.
5. Elementos: (Tiene un peso de  0, 0, 0, 0, 1)
   • Los estilos aplicados a los elementos son los más básicos y fáciles de reescribir.
6. Selector Universal: (Tiene un peso de  0, 0, 0, 0, 0)
   • El selector universal no tiene peso alguno y será reescrito por cualquier otra regla.

2.1.2. Ejemplo para entender como funciona la especificidad CSS:

Ahora daremos un ejemplo para entender como funcionan estos valores en selectores y como se tienen en cuenta para saber cual es la regla CSS que predomina en un elemento HTML en caso que tengan dos o mas reglas iguales:

1. Introducimos un elemento HTML con selector de clase: Supongamos que tenemos el siguiente elemento HTML con un selector CSS de clase: <h2 class="prueba">.
2. Introducimos las reglas CSS: Ahora supongamos que tenemos las siguientes reglas CSS para modificar el estilo de dicho elemento HTML anterior.
   • .prueba {color: red}
   • h2 {color: blue}
   • h2.prueba {color: green}
   • Como podemos ver, las tres reglas de CSS aplican al elemento HTML del paso 1 y modifican el mismo estilo (color), y cada una intenta dar un tipo de color diferente.
3. Calculamos el valor de especificidad: Para determinar cual es la regla CSS que prevalece calculamos su valor de especificidad:
   • .prueba {color: red}, esta regla usa el selector de clase para intentar darle un color al elemento <h2>, y si vemos los valores que dijimos anteriormente, los selectores de clase tienen un valor de 10 (0,0,0,1,0,)
   • h2 {color: blue}; esta regla usa un selector de elemento con un valor de 1 (0,0,0,0,1)
   • h2.prueba {color: green}, esta regla usa dos selectores, el de elemento (<h2>) y el de clase (.prueba) juntos, y la suma de sus valores da 11 (1 de elemento y 10 del selector clase).
4. CONCLUSÓN: La regla CSS que prevalece para el elemento <h2> de este ejemplo es la regla h2.prueba {color: green} ya que es la que tiene el valor de especificidad mas alto.

Ahora que quedo claro que es la especificidad en CSS, la pregunta es ¿Qué pasa cuando hay dos o mas reglas con la misma especificidad?. Aquí entra en juego la siguiente característica de «Orden».

2.2. Orden en CSS:

Esta característica en CSS, también conocida como la regla «última en cascada» es un principio que determina qué regla de estilo se aplica a un elemento HTML cuando hay dos o más reglas con la misma especificidad.

2.2.1. ¿Y como funciona esta regla de última cascada? Ejemplo:

Esta regla establece que, en caso que dos o mas reglas CSS se apliquen a un mismo elemento HTML, la regla que se define en último lugar en el código CSS tendrá prioridad sobre las demás.

EJEMPLOS DE ORDEN EN CSS:

Vamos a seguir el ejemplo anterior con una pequeña modificación para entender como funciona esta regla de orden o última en cascada:

<strong>HTML</strong>
<h2 class="prueba">


<strong>CSS</strong>
.prueba {color: red}

h2 {color: blue}

h2.prueba {color: green}

h2.prueba {color: black}Lenguaje del código: HTML, XML (xml)

Explicación del ejemplo:

• Como podemos ver, ahora tenemos una regla CSS más (h2.prueba {color: black}) con la misma especificidad que la precedente (h2.prueba {color: green}).
• En este caso, la regla que predomina es la que se encuentra en el último orden o como se conoce también, la ultima en cascada.

2.3. Herencia en CSS:

La herencia es un mecanismo que permite a los elementos HTML heredar las propiedades CSS de estilo de sus elementos padre. Esto significa que si un elemento no tiene definida una propiedad de estilo específica, puede «tomar prestada» la propiedad del valor definido en su elemento padre.

2.3.1. ¿Y como funciona la herencia en CSS? Ejemplo:

Imagina que tienes una estructura HTML como la siguiente:

<div class="contenedor">
  <h1>Título</h1>
  <p>Este es un párrafo.</p>
</div>Lenguaje del código: HTML, XML (xml)

Y tienes un código CSS como este:

.contenedor {
  color: blue;
  font-family: Arial, sans-serif;
}Lenguaje del código: CSS (css)

En este ejemplo, tanto el elemento <h1> como <p> dentro del contenedor heredaran las propiedades color y font-family del elemento padre .contenedor. Esto significa que el texto del título será azul y se usará la fuente Arial o una fuente sans-serif si Arial no está disponible.

Hay que tener en cuenta que hay propiedades que se heredan y otras que no, para su aplicación se deben aplicar directamente en el elemento HTML.

2.3.2. ¿Qué propiedades SI se heredan?

Algunas de las propiedades más comunes que se heredan son:

• Color: El color del texto.
• Fuente: La familia de fuentes utilizada para el texto.
• Tamaño de fuente: El tamaño del texto.
• Estilo de fuente: Negrita, cursiva, subrayado, etc.
• Alineación de texto: Izquierda, derecha, centrado, justificado.
• Margen: El espacio alrededor del elemento.
• Relleno: El espacio entre el borde del elemento y su contenido.
• Fondo: El color o imagen de fondo del elemento.

2.3.4. ¿Y que propiedades NO se heredan?

En CSS, no todas las propiedades se heredan del elemento padre a sus hijos. Algunas de las propiedades que no se heredan por defecto son:

1. Propiedades de posicionamiento: position, top, right, bottom, left, z-index
   • Estas propiedades controlan la posición del elemento en la página y no se heredan porque pueden generar conflictos si se aplican a varios elementos anidados.
2. Propiedades de tamaño y dimensiones: width, height, max-width, max-height, min-width, min-height
   • Estas propiedades definen el tamaño del elemento y no se heredan porque el tamaño de un elemento suele depender de su contenido y de cómo se distribuye en el espacio disponible.
3. Propiedades de borde y contorno: border, border-width, border-style, border-color, outline, outline-width, outline-style, outline-color
   • Estas propiedades controlan el aspecto del borde y el contorno del elemento y no se heredan porque el estilo de los bordes suele ser específico de cada elemento.
4. Propiedades de visibilidad: visibility, display
   • Estas propiedades controlan la visibilidad y el tipo de visualización del elemento y no se heredan porque pueden afectar la estructura y el diseño de la página.
5. Propiedades de fondo: background-image, background-color, background-repeat, background-position, background-attachment
   • Estas propiedades controlan el aspecto del fondo del elemento y no se heredan porque el fondo suele ser específico de cada elemento.
6. Propiedades de texto: text-decoration, text-align, text-indent, text-transform, letter-spacing, word-spacing, text-shadow
   • Estas propiedades controlan el aspecto del texto del elemento y no se heredan porque el estilo del texto suele ser específico de cada elemento.
7. Propiedades de listas: list-style-type, list-style-image, list-style-position
   • Estas propiedades controlan el aspecto de las listas y no se heredan porque el estilo de las listas suele ser específico de cada lista.
8. Propiedades de cursiva y negrita: font-weight, font-style
   • Estas propiedades controlan el peso y el estilo de la fuente del texto y no se heredan porque el estilo de la fuente suele ser específico de cada elemento.
9. Propiedades de espacio entre elementos: margin, padding
   • Estas propiedades controlan el espacio alrededor del elemento y no se heredan porque el espacio entre elementos suele depender del diseño y la distribución de la página.

RESUMEN: Al comprender qué propiedades se heredan y cuáles no, puedes utilizar la herencia de manera efectiva para crear diseños web más eficientes y consistentes, evitando conflictos de estilo y simplificando tu código CSS.

3. ¿Cómo funciona la cascada en CSS?

Cuando existen dos o mas reglas CSS que se aplican a un mismo elemento HTML, los navegadores como Google, siguen este método de cascada para especificar cual será el estilo que se terminará aplicando.

Y aquí es donde entran en juego estas características que acabamos de mencionar en el punto anterior, ya que los pasos que dichos navegadores utilizan para resolver las declaraciones conflictivas son:

1. ESPECIFICIDAD: Primero tiene en cuenta este principio, donde el selector con el mayor grado de especificidad es que se usara para aplicar las reglas CSS sobre aquellos que tienen un menor grado de especificidad.
2. ORDEN: Segundo, se aplica este principio de orden cuando dos o mas reglas CSS con el mismo grado de especificidad apuntan a un mismo elemento HTML, en tal caso ganaran las reglas que se encuentren en el último orden en el cual se hayan aplicado.

No nombramos la característica de HERENCIA, ya que dicho principio se aplica solo cuando un elemento HTML no tiene ningún estilo CSS especificado, y en tal caso, heredará las reglas especificadas en su elemento padre.

4. ¿Qué precauciones debería tener presente en el método cascada CSS?

A la hora de utilizar el método de cascada en CSS, es importante tener en cuenta las siguientes consideraciones o perecuaciones para asegurarte de que tus estilos se aplican correctamente y de que tu código sea fácil de leer y mantener:

1. Comprende el orden de aplicación:
2. Usa la especificidad estratégicamente:
3. Aprovecha el principio de herencia:
4. Evita conflictos de estilo:
5. Mantén un código CSS organizado:
6. Usa la declaración !important con precaución:
7. Comprende las propiedades heredables y no heredables:
8. Utiliza herramientas de verificación de CSS:

4.1. Comprende el orden de aplicación:

• La cascada CSS determina el orden en que se aplican las reglas de estilo a un elemento.
• Las reglas se aplican en base a su especificidad, selector y orden en el código.
• Si dos o más reglas tienen la misma especificidad, la que se define en último lugar tiene prioridad.

4.2. Usa la especificidad estratégicamente:

• La especificidad se calcula en base al número y tipo de selectores utilizados en una regla.
• Una regla con mayor especificidad siempre tendrá prioridad sobre una regla con menor especificidad.
• Utiliza la especificidad de forma estratégica para asegurarte de que las reglas que deseas que se apliquen tengan prioridad.
• Evita utilizar especificidad excesiva, ya que puede dificultar la lectura y el mantenimiento del código.

4.3. Aprovecha el principio de herencia:

• La herencia permite a los elementos heredar las propiedades de estilo de sus elementos padre.
• Esto simplifica el código CSS al evitar la necesidad de definir las mismas propiedades para cada elemento.
• Utiliza la herencia de forma efectiva para crear diseños web más coherentes y reducir la cantidad de código CSS necesario.

4.4. Evita conflictos de estilo:

• Los conflictos de estilo pueden ocurrir cuando dos o más reglas intentan definir la misma propiedad para un elemento.
• La cascada CSS resuelve los conflictos de estilo en base a la especificidad y el orden de las reglas.
• Ten cuidado con los selectores anidados y asegúrate de que las reglas que deseas que se apliquen tengan la especificidad adecuada.
• Utiliza herramientas de verificación de CSS para identificar y corregir conflictos de estilo en tu código.

4.5. Mantén un código CSS organizado:

• Un código CSS organizado facilita la lectura, el mantenimiento y la depuración.
• Utiliza una estructura de código consistente y documenta tus reglas CSS de forma clara.
• Separa las diferentes partes de tu código CSS en archivos separados, si es necesario.
• Utiliza herramientas de preprocesamiento CSS como Sass o LESS para organizar y modular tu código CSS.

4.6. Usa la declaración !important con precaución:

• La declaración !important anula las reglas normales de la cascada CSS y fuerza la aplicación de una propiedad de estilo.
• Utilízala con precaución, ya que puede dificultar la lectura y el mantenimiento del código.
• Resérvala para casos específicos donde sea estrictamente necesario anular otras reglas.

4.7. Comprende las propiedades heredables y no heredables:

• No todas las propiedades CSS se heredan por defecto.
• Algunas propiedades, como position, width y border, no se heredan porque pueden generar conflictos si se aplican a varios elementos anidados.
• Ten en cuenta qué propiedades se heredan y cuáles no al definir estilos para elementos padre e hijo.

4.8. Utiliza herramientas de verificación de CSS:

• Existen herramientas online y plugins para editores de código que te ayudan a identificar y corregir problemas de especificidad, conflictos de estilo y errores de sintaxis en tu código CSS.
• Utiliza estas herramientas de forma regular para mantener tu código CSS limpio y organizado.

Siguiendo estas consideraciones, podrás utilizar el método de cascada CSS de forma efectiva para crear diseños web atractivos, consistentes y fáciles de mantener. Recuerda que la clave está en comprender cómo funciona la cascada, utilizar la especificidad de forma estratégica y mantener tu código CSS organizado y bien documentado.

5. Preguntas frecuentes y resumen sobre cascada CSS.