Streaming live at 10am (PST)

Refactoring best practices


#1

Hey guys,

Been wondering what's the best way to refactor a site. Sometimes I create a prototype on WF and later want to create a clean and solid version to deliver. The prototype might have too many selectors and inefficient HTML/CSS structure.

My questions is - what's the best practice here? can I simply delete elements from the page and they'll be erased from the code without leaving traces?

Alternatively I was thinking to recreate the site from scratch, but maybe that's an overkill?

Lastly, how do you delete selectors efficiently?
@cyberdave I would love an insider note on the subject :slight_smile:

Thanks,


#2

IMO the best refactor is one where it's not required - I do it right the first time.


#3

Ideally, yes. But considering how easy it is to prototype in WF it sometimes replaces Sketch for me... Then, refactoring is essential @samliew. Also, as technologies evolve there are various ways to achieve similar results - it's important to understand how WF works under the hood when changing a whole page from conventional positioning to Flexbox for instance.


#4

Redo a section with new classes, delete the old one, clean unused styles. And you're done.


#5

Even if you plan ahead for layout, structure and even interaction, re-thinking of the structure will happen during building/integration, and fine-tuning. Webflow, in my opinion, doesn't prevent you to completely ditch prototypes and pen+paper approach but it's efficient and quick enough not to spend as much time on them as we were before.

So considering refactoring is easy and efficient with Webflow, do it. I do that for all my sections, all of them: design it fast, redo it below with refactoring, clean unused classes. It's even faster now that WF adds classes automatically, drafting is super efficient.

You can even use draft images then add final images afterwards. Before adding a domain, duplicate your site and it will get rid of all unused/unlinked images.


#6

Thanks for clarifying Vincent, that's the approach I was going for.


#7

I was on my phone before :joy: