Cómo usar: Comprobador de erratas en clases CSS
- Introduce la URL de una página publicada (tu dominio de pruebas
.webflow.iotambién sirve) y haz clic en Comprobar URL. También puedes pegar HTML, una sola sección o simplemente una lista de nombres de clase. - Opcionalmente, pega el CSS para ver también las clases que existen en la hoja de estilos pero no en la página, y las clases que no tienen ningún estilo.
- Elige las reglas de nombrado contra las que comprobar: Client-First, BEM o ninguna.
- Revisa los resultados (haz clic en una tarjeta de estadísticas para ir a su lista) y renombra o fusiona las clases en el Style Manager de Webflow. Descarga la lista completa de clases en CSV si la necesitas.
Por qué se desordenan los nombres de clase
En un proyecto de Webflow con varias personas y unos meses de cambios, los nombres de clase se van deteriorando poco a poco. Alguien escribe hero_heding una vez, Webflow crea sin problemas una clase nueva y, desde ese momento, la mitad de los títulos usan la errata. Los elementos eliminados del panel Add reciben nombres automáticos como div-block-12 o text-block-3. Un diseñador escribe hero-title y otro hero_title. Cada uno de estos casos añade CSS, hace que los cambios globales no alcancen a todos los elementos y complica la limpieza del Style Manager.
Qué encuentra el comprobador
| Comprobación | Ejemplo |
|---|---|
| Posibles erratas (distancia de edición) | is-secondray junto a is-secondary |
| Duplicados en singular y plural | feature-card y feature-cards |
| Mismas palabras con distinto separador o mayúsculas | hero-title, hero_title, heroTitle |
| Valores por defecto sin nombrar de Webflow | div-block-12, link-block-3, heading-7 |
| Problemas de formato | Mayúsculas, dígitos al inicio, separadores dobles, nombres muy largos |
| Reglas de Client-First | Más de un guion bajo, clases is- usadas como clases base, clases combinadas sin is- |
| Reglas de BEM | Elementos anidados como card__body__title |
| CSS frente a HTML | Clases en la hoja de estilos pero no en la página, o en la página sin estilos |
La comprobación de erratas está ajustada para evitar falsas alarmas: las series numeradas (card-1, card-2, heading-style-h2/h3) y las variantes de tamaño o estado (margin-small/margin-large, is-active/is-inactive) no se marcan. Cuando dos nombres son muy parecidos, se sugiere como forma correcta la que más se usa.
Cómo revisar un sitio de Webflow completo
El CSS publicado de un sitio de Webflow contiene todas las clases con estilo del proyecto, así que una comprobación por URL compara la página con la lista completa de clases. Por eso es una buena forma de detectar erratas incluso en clases usadas en otras páginas. Ten en cuenta que “está en el CSS pero no en esta página” solo significa que la clase no se usa en la página que revisaste: revisa tus plantillas principales antes de borrar nada. Las clases w- propias de Webflow se ignoran.
Cómo corregir problemas en Webflow
- Renombra una clase seleccionando un elemento que la use y haciendo doble clic en ella en el campo Selector: todos los elementos que la usan se actualizan.
- Fusiona una errata con la clase correcta seleccionando los elementos con la errata, quitándola y aplicando la clase correcta; después elimina la clase sin usar con Style Manager → Clean up.
- Acordad una convención para las secciones nuevas: el Generador de nombres de clase produce nombres coherentes en Client-First o BEM, y HTML & CSS a Webflow pega secciones programadas con sus clases.
Antes de un lanzamiento o de entregar el proyecto a un cliente, combina esto con el Comprobador SEO, el Comprobador de enlaces rotos y un README de entrega.
También se busca como: comprobador de clases css, errores en clases css webflow, clases css duplicadas, auditoría de clases webflow, revisar nombres de clases css, div-block webflow, linter de clases css, convención client-first.
Herramientas que combinan con: Comprobador de erratas en clases CSS
- 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.
- Comprobador de diferencias — Pega la versión original y la modificada para ver, una al lado de la otra, las líneas añadidas, eliminadas y modificadas, con las palabras exactas que han cambiado resaltadas dentro de cada línea.
- Redirecciones de WordPress a Webflow — Migrar un sitio de WordPress a Webflow cambia casi todas las URLs: rutas de blog con fecha, archivos /category/, barras finales y slugs de páginas.
- Webflow Clipboard Bridge — Webflow guarda los elementos en el portapapeles con un formato especial que no viaja entre navegadores (Firefox → Chrome, Safari → Edge…).