Domina la especificidad CSS: la guía definitiva para Webflow

Muy bien, ninjas de Webflow, es hora de enfrentarnos a la bestia que es la especificidad CSS. La especificidad CSS es el conjunto de reglas que usa un navegador para decidir qué regla CSS gana cuando varias reglas apuntan al mismo elemento. Y para que esta guía sea lo más completa posible, veremos también cómo el sistema Client-First de Finsweet puede ayudarte a mantener tu CSS limpio y fácil de mantener, y a mantener a raya el tamaño de esa vieja hoja de estilos. Hoy somos un estudio pequeño y ‘solo’ de Webflow. Empezamos en este mundillo un poco antes de usar Webflow, así que teníamos una buena base de CSS, pero entendemos perfectamente que muchos diseñadores de Webflow aprenden CSS por primera vez dentro de Webflow, y no hay nada de malo en ello. Entender la especificidad CSS cuanto antes le hace la vida mucho más fácil a cualquier desarrollador de Webflow. Pero basta de charla, vamos al grano.

¿Qué es la especificidad CSS?

Piensa en la especificidad CSS como un sistema de puntos en el que distintos tipos de selectores aportan distintos valores a la puntuación de especificidad. Cuanto mayor es la especificidad, más prioridad tiene la regla. Este es el desglose de la jerarquía de especificidad:

1. Estilos en línea: 1000 puntos. Son los más específicos.
2. IDs: 100 puntos. Muy específicos.
3. Clases, atributos y pseudoclases: 10 puntos cada uno. Moderadamente específicos.
4. Elementos y pseudoelementos: 1 punto cada uno. Los menos específicos.

Ejemplo de cálculo:

• #header = 100 puntos (selector de ID).
• .menu .item = 10 + 10 = 20 puntos (dos selectores de clase).
• ul li a = 1 + 1 + 1 = 3 puntos (tres selectores de elemento).

¡Ojo! Esos puntos son una forma práctica de pensarlo, pero en realidad no son una puntuación en base 10. El navegador compara las columnas una a una, empezando por la más específica, así que un solo ID vence a cualquier número de clases. Además, :where() no añade ninguna especificidad, mientras que :is(), :not() y :has() adoptan la especificidad del selector más específico que lleven entre paréntesis. Si dos reglas terminan con exactamente la misma especificidad, gana la que aparece última en la hoja de estilos.

Vamos a desglosarlo con más ejemplos para aclarar cómo funciona la especificidad en situaciones reales.

Ejemplo 1: combinar selectores

Fíjate en estas reglas:

Un ancla <a> dentro de un elemento con el ID #nav y la clase .nav-item será roja por los 11 puntos del selector .nav-item a, que tiene una especificidad mayor que .nav-item. La regla #nav ni siquiera entra en juego aquí, porque apunta al elemento con ese ID y el ancla solo hereda de él. Una regla que apunta directamente al ancla siempre vence a un valor heredado.

Ejemplo 2: anular la especificidad

Fíjate en estas reglas:

Un elemento <p> con el ID #content y la clase .section tendrá fondo amarillo gracias a la mayor especificidad del selector de ID.

La especificidad CSS en Webflow

Webflow es fantástico para el diseño web visual, pero por debajo todo es CSS. Entender la especificidad puede ayudarte a depurar por qué ciertos estilos no se aplican.

Ejemplo en Webflow

Imagina que tienes estas reglas CSS:

Un párrafo con el ID #hero y la clase .header será rojo, gracias a la mayor especificidad del selector de ID.

Ampliando esto, veamos un ejemplo más complejo:

Aquí, un h2 dentro de un elemento con la clase .article, que a su vez está dentro de un elemento con el ID #main-content, tendrá un tamaño de fuente de 2em.

El Designer de Webflow

Todo esto parece muy sencillo, ¿verdad? Por supuesto, en Webflow es un poco distinto. Es una plataforma de desarrollo visual, así que ¿qué es qué, dónde lo veo y qué se aplica a qué?

Todas estas preguntas son totalmente válidas, ya que mirar el elemento en el Designer sin más, como en la imagen de abajo, no te dice gran cosa aparte del nombre de la clase.

Entonces, ¿qué nos dice realmente el Designer? Para empezar, podemos ver fácilmente la estructura, lo que ya nos ayuda de inmediato.

Pero lo más importante es que podemos ver exactamente de qué está heredando el elemento al hacer clic justo encima del nombre de la clase, a la derecha del Designer.

El sistema Client-First de Finsweet

El sistema Client-First de Finsweet cambia las reglas del juego para mantener tus proyectos de Webflow organizados y escalables. Se basa en un enfoque estructurado del CSS que facilita entenderlo y mantenerlo.

Principios básicos de Client-First

• Clases globales: definen estilos generales que se pueden reutilizar en todo el proyecto.
• Clases personalizadas: específicas de cada componente, lo que hace los estilos modulares.
• Clases de utilidad: clases con un único propósito para pequeños ajustes.

Ejemplo (los nombres de clase de aquí son ilustrativos; los nombres reales de Client-First se enumeran más abajo):

Ampliando el sistema Client-First de Finsweet:

Tipos de clases en Client-First

1. Clases de utilidad: se aplican de forma global, para propiedades CSS concretas.
   • Ejemplo: .background-color-primary { background-color: #ff0000; }
2. Clases personalizadas: específicas de componentes o elementos, a menudo con guiones bajos.
   • Ejemplo: header_background-layer
3. Clases globales: se usan en todo el proyecto y garantizan la uniformidad.
   • Ejemplo: .margin-large { margin: 3rem; }

Uso de clases combo

Las clases combo de Client-First usan una clase base y añaden variaciones con el prefijo is-.

• Ejemplo (notación del Designer, que en CSS es .button.is-primary): button is-primary { background-color: #007bff; }

Evita el apilamiento excesivo

El apilamiento excesivo consiste en acumular muchas clases en un elemento, algo que Client-First desaconseja. En su lugar, usa nombres de clase claros y organizados para conservar la legibilidad y la facilidad de mantenimiento.

• Ejemplo de apilamiento excesivo: class="text-bold text-large text-center"
• Mejor enfoque: usa una única clase personalizada como .header-text

Por qué importa el orden de las clases en Webflow

Webflow escribe tus clases en la hoja de estilos en el orden en que las creaste, y cuando dos clases tienen la misma especificidad, gana la que se creó después. Por eso pegar un sistema de espaciado en el orden equivocado puede romperlo, y es justo lo que arregla la herramienta de reordenación de la extensión de Finsweet. Las clases combo son la otra mitad de la historia, y las hemos tratado en nuestro artículo sobre cómo añadir modos de fusión CSS con clases combo y en cómo crear un resumen de blog con clases combo. Si estás sopesando Client-First en sí, lee si Finsweet Client-First es adecuado para ti.

Consejos prácticos para gestionar la especificidad

1. Evita los estilos en línea: tienen la mayor especificidad y pueden anular casi todo lo demás.
2. Usa los selectores de ID con moderación: pueden complicar tu CSS si abusas de ellos.
3. Organiza los estilos de forma jerárquica: usa sistemas como Client-First para mantener tu CSS modular y fácil de mantener.
4. Usa el Designer de Webflow: las herramientas visuales pueden ayudarte a visualizar y gestionar tus estilos con eficacia, pero puede ser difícil reorganizar una vez que has empezado. Clona siempre el Finsweet Client-First Cloneable u otros como Relume si quieres seguir ese camino.
5. Usa la extensión de Chrome de Finsweet para reordenar: recuerda que es un movimiento avanzado y que debes sentirte cómodo con la especificidad CSS, pero la extensión de Finsweet sí permite reordenar las clases en Webflow.

Preguntas frecuentes sobre la especificidad CSS

¿Qué es la especificidad CSS?

La especificidad CSS es la puntuación que un navegador asigna a cada selector para decidir qué regla gana cuando varias reglas definen la misma propiedad en un elemento. Los estilos en línea vencen a los IDs, los IDs vencen a las clases, los atributos y las pseudoclases, y estos vencen a los elementos simples y los pseudoelementos.

¿Cómo se calcula la especificidad CSS?

Cuenta los IDs, luego las clases, los atributos y las pseudoclases, y después los elementos y pseudoelementos del selector, y compara los recuentos de izquierda a derecha. Así, #header vence a .menu .item, y .menu .item vence a ul li a.

¿Qué gana cuando dos selectores tienen la misma especificidad?

El que aparece último en la hoja de estilos. En Webflow eso significa la clase que creaste después, por eso el orden de las clases importa y por eso la extensión de Finsweet puede reordenarlas.

¿Anula !important la especificidad?

Sí, una declaración !important vence a las declaraciones normales, y es lo único que puede anular un estilo en línea. Úsala como último recurso, porque hace que tu CSS sea mucho más difícil de depurar.