Dominar la especificidad de CSS: la guía definitiva para Webflow

Muy bien, ninjas de Webflow, es hora de abordar la bestia que es la especificidad de CSS. Y para hacerlo lo más completo posible, también profundizaremos en cómo el sistema Client-First de Finsweet puede ayudar a mantener tu CSS limpio y fácil de mantener, y a reducir el tamaño de esa antigua hoja de estilos. Hoy en día solo somos un pequeño estudio de Webflow, pero empezamos con este juego un poco antes de usar Webflow, así que teníamos un conocimiento bastante bueno de CSS, pero entendemos perfectamente que muchos diseñadores de webflow aprenden CSS por primera vez en Webflow, y eso no tiene nada de malo. Comprender la especificidad del CSS lo antes posible solo hace que las cosas sean mucho más fáciles para un desarrollador de Webflow. Pero basta de eso, vamos a sumergirnos de lleno.

¿Qué es la especificidad de CSS?

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

1. Estilos en línea: 1000 puntos. Estos son los más específicos.
2. Identificaciones: 100 puntos. Muy específico.
3. Clases, atributos y pseudoclases: 10 puntos cada uno. Moderadamente específico.
4. Elementos y pseudoelementos: 1 punto cada uno. Menos específico.

Ejemplo de cálculo:

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

Vamos a desglosarlo con más ejemplos para aclarar cómo funciona la especificidad en escenarios de la vida real.

Ejemplo 1: Combinación de selectores

Tenga en cuenta estas reglas:

Un ancla <!-- fs-richtext-ignore --><a>dentro de un elemento con el ID #nav y la clase .nav-item aparecerá en rojo debido a la especificidad de 11 puntos de la .nav-item a selector, que tiene una especificidad mayor que .nav-item.

Ejemplo 2: Especificidad predominante

Tenga en cuenta estas reglas:

UN <!-- fs-richtext-ignore --><p>elemento dentro de un elemento con el ID #content y clase .sección tendrá un fondo amarillo debido a la mayor especificidad del selector de ID.

Especificidad en Webflow

Webflow es fantástico para el diseño web visual, pero en el fondo, todo es CSS. Entender la especificidad puede ayudarte a depurar los motivos por los que ciertos estilos no se aplican.

Ejemplo en Webflow

Tenga en cuenta que tiene estas reglas de CSS:

Un párrafo dentro de un elemento con el identificador #hero y clase .encabezado aparecerá en rojo, debido a la mayor especificidad del selector de ID.

Ampliando esto, veamos un ejemplo más complejo:

Aquí, un h2 dentro de un elemento con el ID #main -contenido y clase .artículo tendrá un tamaño de fuente de 2 em.

Diseñador de flujo web

Ahora, eso parece muy simple, ¿verdad? Por supuesto, es un poco diferente en Webflow, es una plataforma de desarrollo visual, entonces, ¿qué es qué y dónde lo veo, y qué se aplica a qué?

Todas estas preguntas son completamente válidas, ya que mirar el elemento solo en el diseñador, como en la imagen de abajo, no te dirá mucho aparte del nombre de la clase.

Entonces, ¿qué es lo que te dice el Diseñador? En primer lugar, podemos ver fácilmente la estructura, lo que nos ayuda inmediatamente.

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

El sistema de Finsweet que prioriza al cliente

El sistema Client-First de Finsweet cambia las reglas del juego para mantener tus proyectos de Webflow organizados y escalables. Hace hincapié en un enfoque estructurado del CSS que facilita su comprensión y mantenimiento.

Principios básicos de dar prioridad al cliente

• Clases globales: Defina estilos amplios que se puedan reutilizar en todo el proyecto.
• Clases de componentes: Específico para componentes individuales, lo que hace que los estilos sean modulares.
• Clases de utilidad: Clases de un solo propósito para pequeños ajustes.

Ejemplo:

Ampliando el sistema Client-First de Finsweet:

Tipos de clases en Client-First

1. Clases de utilidad: Se aplica globalmente, para propiedades CSS específicas.
   • Ejemplo: .background-color-primary {color de fondo: #ff0000;}
2. Clases personalizadas: específico para componentes o elementos, a menudo con guiones bajos.
   • Ejemplo: header_background-layer
3. Clases globales: Se utiliza en todo el proyecto, lo que garantiza la uniformidad.
   • Ejemplo: .margin-large {margen: 3 rem;}

Uso de clases combinadas

Las clases combinadas de Client-First utilizan una clase base y añaden variaciones con el es- prefijo.

• Ejemplo: el botón es primario {color de fondo: #007bff;}

Evite el apilamiento profundo

El apilamiento profundo se refiere a apilar muchas clases en un elemento, lo que Client-First desaconseja. En su lugar, utilice nombres de clase organizados y claros para mantener la legibilidad y la capacidad de administración.

• Ejemplo de apilamiento profundo: class="text-negrita-centro de texto grande»
• Un mejor enfoque: utilice una clase única y personalizada como .texto de encabezado

Consejos prácticos para gestionar la especificidad

1. Evite los estilos en línea: Tienen la máxima especificidad y pueden anular todo lo demás.
2. Use los selectores de ID con moderación: Esto puede complicar tu CSS si se usa en exceso.
3. Organice los estilos jerárquicamente: Usa sistemas como Client-First para mantener tu CSS modular y fácil de mantener.
4. Aproveche el diseñador de Webflow: Las herramientas visuales pueden ayudarte a visualizar y gestionar tus estilos de forma eficaz, pero puede resultar difícil reorganizarlos una vez que has empezado. Siempre clona el clonable Finsweet Client-First u otros, como Relume, si quieres seguir ese camino.
5. Usa la extensión Finsweet para Chrome para reordenar: Recuerda que se trata de una versión avanzada y deberías sentirte cómodo entendiendo la especificidad del CSS, pero la extensión Finsweet te permite reordenar las clases en Webflow.