Skip to content

html-authoring-rules.md

Latest commit

 

History

History
36 lines (29 loc) · 1.54 KB

html-authoring-rules.md

File metadata and controls

36 lines (29 loc) · 1.54 KB
Raw

HTML Authoring Rules for Webflow Compatibility

AI Prompt (copy-paste for generating Webflow-compatible HTML)

Write vanilla HTML, CSS, and JS using REM units instead of PX, BEM-style class naming, class-only styling (no tags/IDs), no descendant selectors, simple selectors, avoid heavy utility classes and complex pseudo-selectors

CSS Selector Routing

Selector Type Example Goes To
Simple class .hero Webflow styleLess
Tag nav {} Custom CSS embed
ID #header {} Custom CSS embed
Descendant .parent .child Custom CSS embed
Compound .card.active Custom CSS embed
Pseudo-class :hover, :nth-child Custom CSS embed
Pseudo-element ::before, ::after Custom CSS embed

CSS Value Routing

Always routed to custom CSS regardless of property:

  • var(--anything) — CSS variables
  • clamp(min, preferred, max) — fluid sizing
  • env(safe-area-inset-*) — device safe areas

JavaScript Best Practices

  • Use event delegation (addEventListener) instead of inline onclick
  • Use querySelectorAll + addEventListener pattern
  • Class toggle patterns need the toggled class in CSS (converter auto-detects unreferenced classes)

SVG Handling

  • SVGs become HtmlEmbed nodes with display:block;margin:0 auto centering
  • For complex SVGs, consider using <img> with SVG src

Structure Tips

  • Use <section> for top-level sections (maps to Webflow Section type)
  • Use semantic HTML (maps to correct Webflow types)
  • Keep nesting reasonable — deep nesting creates many nodes