Great Now that you get this principle, to not put too many, or several IX on one element, you can also extend it to Styling (CSS).
Back in the days where we had a lot of browsers issues — especially with IE6 — it was a good practice to nest divs more in order to avoid box-model interpretations bugs. You’d put the margins on an outer divs, the padding on a div inside, the rest of the box styling on another div inside (bg color, bg image, borders, columns…, then the content and its general positioning on another div inside. So you had 4 divs when you thought you could just have one.
This was technically and semantically correct, anyway.
Today, even with Webflow who’s good at producing cross browser code with minimum, rare issues, I still do that. It has a lot of advantages. Here’s the strategy:
- never style Webflow’s components: columns and columns wrapper, container, sections etc. Don’t styke them or style them to the minimum to alter their default values (for example the height of a Slider element).
- never put content directly inside of a Webflow component: always put a div inside, name it “content” something, and put the content inside of it. This way it will be easy to duplicate the content without having to duplicate the component.
- always use % for width and height of “content” divs, so that you can copy and paste them into another element and they will shrink or expand depending on its size
- so between a component or an outer div and a “content” div, nest other levels of divs: one for the dimensions and positioning (call it “layout” something), then inside, one for the IX (name it “trigger” something)…
- if you’re going to use 3D and transitions, nest another div for that. And inside of this one, put the “content” div.
- put the HTML5 tag (section, article, footer, etc.) on the “layout” div if there is no more obvious element to put in on.
- on the way doing all this, use CSS inheritance as much as you can. Set everything regarding typeface (family, sizes, colors etc) as high as you can, so you can reuse the full content div structure in another context, and you have way more power to craft effects built on states (hover etc).
- if you’re using element for onclik or onhover IX, and if they’re not a HTML link, don’t use links or link blocks. Use a div, and give if the hand cursor. Never use a link if there’s no link on it, it’s not good for accessibility.
If you deal with 3D in styling and IX, put Children perspective at 2000 on the “layout” div, and then don’t bother touching at perspective value for any of the children element. In most of the case, setting the child persp on the outer div is enough and prevent a lot of troubles.
tl;dr nesting is perfectly fine, sane, will prevent issues and will help future design and maintenance. Nest.