Cómo usar: Generador de nombres de clase
- Describe la sección en lenguaje natural: qué es (hero, características, precios, FAQ, footer…) y qué contiene (“eslogan, título, dos botones, imagen a la derecha”, “3 tarjetas con icono y enlace”).
- Elige una convención de nombres: Client-First (el sistema de Webflow de Finsweet), BEM o kebab-case Simple. La estructura se actualiza mientras escribes.
- Haz clic en cualquier clase del árbol para copiarla, o en Copiar todas para la lista completa. Las clases con guiones son clases combo.
- Haz clic en Copiar estructura a Webflow y pega en el Designer para obtener el árbol completo de elementos con clases y estilos de diseño iniciales, o ábrelo en el convertidor de HTML y CSS para editarlo antes.
Por qué importa el nombrado de clases en Webflow
Cada clase que creas en Webflow acaba en el Style Manager y en el CSS del sitio. Sin un sistema, los proyectos acumulan nombres como div-block-47, Heading 3, hero-title y heroTitle uno al lado del otro: imposibles de reutilizar y difíciles de entregar. Una convención de nombres hace que las clases sean predecibles: cualquiera del equipo (o un cliente meses después) sabe qué es pricing_plan-name y dónde se usa.
Las tres convenciones
| Client-First | BEM | Simple | |
|---|---|---|---|
| Sección | section_hero | hero | hero-section |
| Elemento | hero_heading | hero__heading | hero-heading |
| Variante | button is-secondary | hero__button--secondary | button is-secondary |
| Diseño | padding-global › container-large › padding-section-large | hero__container | container |
Client-First, de Finsweet, es el sistema más usado en la comunidad de Webflow: un guion bajo separa la “carpeta” (componente) del elemento, como en hero_content o hero_image-wrapper. Las clases de utilidad se encargan de la tipografía y el espaciado (heading-style-h1, text-size-medium), y las clases combo empiezan por is-. BEM (Block, Element, Modifier) es la convención clásica del front-end y funciona bien cuando el equipo también escribe código fuera de Webflow. Simple en kebab-case sirve para sitios pequeños.
Lo que entiende el generador
Reconoce tipos de sección (hero, características, testimonios, precios, FAQ, estadísticas, logotipos, equipo, pasos, CTA, navbar, footer y más), contenido (eslogan, título, subtítulo, párrafo, botones, imagen, vídeo, formulario, lista, badge), elementos repetidos con cantidad (“3 tarjetas”, “seis preguntas”, “4 estadísticas”) y pistas de diseño (“imagen a la izquierda”, “centrado”, “dos columnas”). Los botones usan una clase global button con un combo is-secondary, como en la mayoría de guías de estilo de Webflow.
De los nombres a una sección construida
Con CSS de diseño inicial activado, la estructura incluye valores por defecto razonables: ancho de contenedor, padding de sección, una cuadrícula de dos columnas que se apila en tablet, cuadrículas de tarjetas que se apilan en móvil y un estilo de botón. Cópialo en Webflow y tendrás un esqueleto funcional sobre el que diseñar. Para afinarlo, ábrelo en HTML y CSS a Webflow, ajusta el código y pégalo. Más adelante, pasa el Comprobador de erratas en clases por la página para detectar errores antes de publicar.
Consejos de nombrado
- Nombra por función, no por apariencia:
pricing_plansobrevive a un rediseño;blue-boxno. - Mantén la carpeta corta y coherente (
hero_,pricing_,footer_). - Usa clases combo para variantes de lo mismo (
is-featured,is-dark) y clases nuevas para cosas distintas. - Reutiliza clases globales (
button,container-large) en lugar de crear una nueva por sección.
También se busca como: nombres de clases webflow, client-first webflow, convención de nombres css, nomenclatura bem, generador de clases css, sistema de nombres webflow, finsweet client-first, nombres de clase css.
Herramientas que combinan con: Generador de nombres de clase
- SVG a Webflow — Pega un SVG desde Figma y cópialo a Webflow como Custom Elements reales: cada <svg>, <path> y <g> se convierte en un elemento que puedes seleccionar, asignarle clases y editar en el Navigator.
- Convertidor de mayúsculas y minúsculas — Pega cualquier texto y conviértelo entre 11 estilos de mayúsculas y minúsculas: desde «Title Case» para titulares hasta «camelCase» y «snake_case» para código.
- Generador de slugs — Convierte cualquier título en un slug de URL limpio y en minúsculas, con transliteración correcta de acentos, umlauts y cirílico, eliminación opcional de palabras vacías y un modo masivo para listas completas.
- Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
Preguntas frecuentes
¿Qué es Client-First?
carpeta_elemento (por ejemplo hero_heading), clases de utilidad globales para tipografía y espaciado, y clases combo que empiezan por is-. Este generador sigue sus convenciones, pero no está afiliado a Finsweet.¿Debo usar Client-First o BEM en Webflow?
¿Usa IA?
¿Puedo pegar la estructura directamente en Webflow?
¿Qué son las clases con guiones?
button is-secondary.