Durante el desarrollo de un proyecto en Webflow descubrí varios detalles interesantes sobre cómo la herramienta maneja los estilos, las clases y la estructura visual.
Aunque es una plataforma muy intuitiva, es importante entender cómo organiza el CSS y la jerarquía de elementos para evitar problemas al mantener el sitio.

En este artículo comparto algunos tips que pueden ayudarte si estás iniciando, especialmente si vienes del mundo del frontend o estás acostumbrado a trabajar con código.

1. Crea tu styleguide antes de empezar

Definir una guía de estilos desde el inicio te ahorra mucho tiempo y mantiene coherencia visual en el proyecto.

Incluye lo esencial

  • Colores principales y secundarios.
  • Tipografías, tamaños de texto y espaciados base.
  • Estilos de botones, títulos y componentes comunes.

Sobre las fuentes

Si vas a usar fuentes de Google, Webflow recomienda descargar los archivos (.ttf, .woff, etc.) y subirlos desde el panel Custom Fonts, en lugar de usar enlaces externos.

Clases reutilizables

  • Crea clases reutilizables, pero recuerda que si modificas una, afectará a todos los elementos que la usan.
  • Agrega primero tus clases específicas para cada elemento y luego las reutilizables, por ejemplo:
.hero-title .heading-h3 .text-center

2. Atención a las combo class

Las combo class (.clase-a.clase-b) te permiten extender estilos de otra clase, pero también pueden sobrescribir propiedades si no se manejan bien.
Es recomendable usarlas solo cuando sea realmente necesario para mantener orden y consistencia en los estilos.

3. Usa el panel Navigator

El panel Navigator te ayuda a entender la jerarquía real del DOM y la relación entre los elementos.
Esto es clave cuando trabajas con estructuras anidadas, animaciones o interacciones complejas.

4. Entiende la cascada de estilos

Webflow aplica estilos de forma desktop-first, lo que significa que los cambios fluyen desde el diseño de escritorio hacia los breakpoints menores.
Ajusta solo los breakpoints necesarios para mantener un diseño limpio, coherente y fácil de mantener.

5. Aprovecha las colecciones (CMS)

Las colecciones (CMS) permiten crear contenido dinámico y escalable sin duplicar páginas.
Ten en cuenta que requieren una suscripción activa, al igual que la publicación en un dominio personalizado, que necesita una suscripción mensual.

6. Personaliza con JavaScript

Si necesitas mayor control o efectos avanzados, puedes importar librerías JavaScript directamente en tu proyecto.
Esto te permitirá crear interacciones o animaciones más personalizadas fuera del alcance nativo de Webflow.

7. Publica primero en staging

Antes de publicar tu sitio, usa el entorno de staging para validar que todo se vea y funcione correctamente.
Así puedes detectar errores de diseño, fuentes o comportamiento antes del lanzamiento final.

Conclusión

Si bien herramientas no-code como Webflow nos ayudan a agilizar la creación de un sitio web, considero que es necesario tener conocimientos de HTML y CSS para poder mantener y ajustar el proyecto con mayor control.
Comprender lo que ocurre detrás de la interfaz visual hace que las decisiones de diseño y estilo sean mucho más conscientes.