I’ve finally adopted pretty much the same habits I had when I was manually writing markup and styles. Habits that made the code solid and cross browser before, and work as well on webflow, making your designs easier to build and maintain. So here are some basic tips:
Never be afraid of nesting. Nest a lot. A long time ago designers learnt not to put to many properties on one element. Like dimensions margins and padding. Rather, it was better to nest several elements. Ended up with much less errors with the box model (how browsers calculate size of elements).
Don’t mind too much adding a lot of classes. Unless you’re working on templates for a big CMS or a website with very high traffic, you’re not going to optimize the site by having this super clean, smart and compact structure. I’m not saying don’t make it clean, but don’t be afraid of class surcharge. Result is what counts. You can always rebuild a section in a cleaner way and clean the unused classes.
It’s often unrealistic when a site is a one man job to have everything right. Structure, markup, SEO, classes, it’s very demanding. So instead of spending too much time on what is behind, make sure the front is correct, doesn’t break accessibility rules, that your HTML5 structure make the minimum of sense (declare nav elements, footer, header, sections and articles, plus the H hierarchy, and it’s already great) and that your design makes sense: don’t hide a 15 items and 3 levels primary menu under a hamburger icon, use real phrases for real people to explain stuff, use the interactions and motion as a tool for the visual hierarchy of things, to bring attention, rather than entertain… all the common sense stuff you can easily forget when you’re playing with such an easy tool Webflow is