El concepto CSS más importante para aprender

La cascada es cómo se diseñó CSS ​​desde el principio, y hay una razón por la que se llama CSS: hojas de estilo en cascada.

Lamentablemente, CSS tiene una mala reputación por el mismo concepto fundamental sobre el que se basa.

Pero, ¿qué es exactamente Cascade? ¿Es tan malo como la mayoría de la gente lo hace sonar?

Introducción

Digamos que John escribe un montón de CSS y luego accede al navegador para probarlo. Para su sorpresa, los estilos que escribió no se aplican al elemento que acaba de diseñar, ¡sino que otros estilos sí lo son!

¿Ves eso ahí mismo? Esa es una de las peores cosas de las que todo el mundo se queja cuando dice "CSS apesta".

Con CSS, varios estilos pueden afectar a un solo elemento. Entonces, tienes paragraphuna página web. Pero esto paragraphpuede ser diseñado por cualquier bloque CSS, literalmente.

Es como tener una variable JavaScript global que puede ser manipulada por cualquier función dentro del código. Una receta para el desastre, parece.

Pero, nuevamente, Cascade constituye el razonamiento fundamental detrás de cómo se creó CSS ​​en primer lugar.

¿Abrázalo?

Bueno, no puedes cambiarlo.

¿Qué es la cascada?

La cascada es cómo el navegador determina qué estilos aplicar a un elemento en particular. Es así de simple y es una pregunta de entrevista decente para un desarrollador front-end.

Por suerte, las pesadillas asociadas a la cascada se pueden entender, ya que se rige por solo dos factores:

  1. La especificidad de los selectores de elementos.
  2. El orden de los estilos que se escriben

Echemos un vistazo rápido a esos.

Especificidad del selector

Puede comparar la especificidad del selector con la forma en que la mente humana interpreta las instrucciones.

Por ejemplo, considere el gráfico siguiente:

Si te dijera “Pásame la caja roja”, ¿cuál me pasarías? ¡Hay dos de ellos!

Puede hacer la pregunta de seguimiento, "¿Cuál de las casillas, a o b?" .

¡O incluso puedes agarrar ambas cajas! ¿No son las dos cajas rojas?

Esta es la situación en la que se encuentra el navegador cuando se trata de la especificidad.

Cuando dices, dale estilo al párrafo con un color de fondo rojo ...

p { background-color: red;}

Dado que puede haber muchos elementos de párrafo en la página, el navegador dice "¿qué párrafo?"

El navegador no puede hacerte una pregunta de seguimiento, por lo que sigue adelante e intenta darle estilo a cada párrafo de la página con un redfondo.

Sin embargo, si se hubiera adelantado a decir, aplique estilo al párrafo con un nombre de clase de reddycon fondo rojo:

p.reddy { background-color: red;}

¡Esa es una solicitud más específica!

Ahora, el navegador aplicará estilo a los elementos de párrafo específicos que ha solicitado.

¡Eso es!

Técnicamente, el navegador echa un vistazo a cada selector que apunta a un elemento específico y asigna "puntuaciones" a cada uno de ellos, y gana el que tenga una puntuación de especificidad más alta.

La forma en que calcula las puntuaciones es sencilla.

Suponga que el navegador, mientras interpreta su CSS, tiene 4 publicaciones de objetivos.

  1. Por cada estilo en línea que apunta a un elemento que usa el styleatributo, se asigna 1 objetivo a la publicación de la meta (a).
  2. Por cada idselector, se asigna 1 gol para publicar (b).
  3. Por cada classselector, selector de atributo y pseudoclases presentes, se asigna 1 objetivo para publicar (c).
  4. Por cada selector de elemento y pseudoelemento, se asigna 1 objetivo a publicar (d).

La forma en que recuerdo esto es usando el acrónimo, SICAPEP:

Al asignar puntos, el total de puntos se calcula por concatenación , como dígitos en un número de 4 dígitos.

Un ejemplo rápido de especificidad

Considere las siguientes declaraciones de estilo:

#nav .removed > a:hover {}
li:last-child h3 .title {}

¿Cómo calcularía el navegador los “puntos” de especificidad para estos selectores?

#nav .removed > a:hover

Aquí está el desglose:

(a) No hay estilo en línea, por lo que la puntuación para el primer poste de gol es 0.

(b) Hay un idselector, #naveso es una puntuación de 1 para el segundo poste de meta.

(c) También hay un classselector .removedy un selector de pseudo-clase :hover, que suma una puntuación de 2 para el tercer poste de meta.

(d) Hay un selector de elementos a, eso es una puntuación de 1 en la cuarta publicación.

Aquí está la representación gráfica de las puntuaciones.

La puntuación de especificidad total se concatena como 0121.

Como ocurre con las matemáticas normales, 0001es menor que 0005y 0121es mayor que 0021.

Ahora, comprende cómo se calcula la especificidad.

¿Puede intentar calcular la especificidad del otro selector li:last-child h3 .title?

Déjame saber a qué has llegado en la sección de comentarios :)

Orden de estilo

El segundo factor que influye en la cascada es el orden de estilos. Se puede ver un ejemplo realmente básico con el estilo del mismo elemento en 2 bloques de código diferentes.

Por ejemplo:

p.reddy { background: red;}p.reddy { background: blue;}

Aunque ambos selectores tienen la misma especificidad, 0011entra en juego el orden del conjunto de reglas.

La segunda declaración anulará la primera, y el párrafo será azul y no rojo.

Pregunta capciosa

Teniendo en cuenta el documento siguiente, ¿cuál sería el color del texto del enlace?

 Inline Styles and Specificity  #nav-force > ul > li > a.nav-link { color: blue; };     
  • Link
  • ¿Azul o rojo?

    Tenga en cuenta que el estilo del enlace es tanto en línea como dentro del &lbloque t; / style>.

    Oh, si te sientes seguro, solo di la respuesta en voz alta, para ti mismo.

    Pero la respuesta real es que el estilo en línea siempre gana. El gol se marca en el primer poste, que supera cualquier gol en cualquiera de los otros postes.

    ¿Por qué?

    La especificidad final será del orden de miles - 1000 - y eso supera a 9 goles en la segunda publicación. 1000 es mayor que 0900.

    NOTA: Como señaló Paul McCann en la sección de comentarios, el párrafo anterior es una simplificación excesiva. Eche un vistazo a lo que dice.

    Conclusión

    Con suerte, ahora estará armado con una sólida comprensión de cómo funciona la cascada. Aprender CSS más avanzado probablemente ahora será más fácil y, lo que es más importante, ahora sabe dónde buscar cuando tiene esos molestos errores.

    ¡Te veo luego!

    ¿Listo para convertirte en Pro?

    He creado una guía de CSS gratuita para que sus habilidades de CSS se desarrollen de inmediato. Obtenga el libro electrónico gratuito.