Design question
I realize that in Webflow they do this a lot when design a website - Putting a div as a spacer. Why is the reason behind it and not just give some padding and/or margin for example?
4 Replies
One point that comes up is reusability: Say you have a Call To Action container that you want to use in several contexts on your site, then it makes more sense to separate the spacing behavior away from the cta-container class. This makes it easy to use the cta-class unmodified in different contexts where you might need different spacing depending on your design. You could use combo classes and that
s related to the second point that comes up.
Readability in the Navigator.: As you know the elements first class name is the only one that is vivible in the navigator. Having 4 cta-containers in a row will only read as:
cta-container
cta-container
cta-container
cta-container
Regardless of their combo classes. You would have to click on each cta-container to see its spacing configuration (combo classes). But if you used spacer divs instead, the Navigator would look like this:
space-xs
cta-container
space-m
cta-container
space-xl
cta-container
space-xxs
This makes it easier to get an understanding of the structure of the design. Especially if you are handed a project that is made by somebody else. Or you are making a project that is going to be handed over to a client.
And it makes it very easy to make global changes to the cta-container without first having to click on the "inheriting # selectors", selecting the base class, editing and then clicking "back" in the Style panel.Also note client first board of directors recently had a vote to keep/remove spacing divs and they voted to keep them
Spacing strategy - Client-First
Client-First is a set of guidelines and strategies to help you build Webflow websites in a clear and scalable way that any human can understand.
Tim Ricks has a good video about spacing divs too you might find helpful: https://www.youtube.com/watch?v=m3q3PGJFKQw&t=1s
Timothy Ricks
YouTube
Why Your Spacing Divs Suck
Join our exclusive Wizards Community and get the Webflow Wizards Course
https://www.patreon.com/timothyricks
Try Webflow using my affiliate link below.
https://webflow.grsm.io/4840096