We have a client whose website was built by another agency, and they’ve implemented their own styling throughout. Our task is to create multiple new landing pages, each with a completely custom design—meaning no two pages are the same and will require a significant number of new CSS classes.
The existing CSS file is already around 300KB, and I want to avoid adding more to it. I’m considering referencing an externally hosted CSS file specifically for these landing pages.
Has anyone encountered a similar challenge? If so, how did you handle it?
In Webflow’s current setup it’s difficult to balance “I want easy designer support and one-click publishing” with “Per-page CSS” and “Efficient per-page CSS files”.
If the pages are simple one-pager lead funnels, I usually create each of them as a separate site, and host them on Netlify.
If you want them all combined into a single site so that they are paths, like /offer/mar-2025 you’d need to IFRAME them or use a reverse proxy to combine them.
If you like tech and want to get advanced, it’s possible to use tools like PurgeCSS to identify the CSS needed for a specific page, and then spin-out a separate page-specific CSS file, but to suppress Webflow’s main CSS file you’d need a reverse proxy setup to mod the page on delivery.
Likewise your other pages would have a lot of unused classes in their CSS.
At this point I’d personally lean into-
Build the sites separately
Use a shared component lib ( Agency plan ) if it makes sense
Export and host on Netlify
Use either subdomains, or a reverse proxy to merge them into the main site