I’m not sure if this topic deserves it’s own thread, but I’m genuinely curious as to why some developers use Perspective Label components as spacers (instead of using margin or padding, for example). I’ve seen many developers I respect use this method to space out components.
Is there a reason why this is done? If you think this isn’t common, create a new project and in the Project Template, the Perspective Menu Nav 8.1 project uses this same methodology.
What I would do if I was designing this window would be to add all of the components besides the spacer labels you can see in the Project Browser screenshot above (ie. Menu Dock, Ignition Logo, Dropdown, User, Sign In, Alarm Icon, Alarms). Then, I’d add margin to the components that are already in there, not use Label components as spacers.
/* css pseudo-code */
Menu Dock {
margin-left: 10px;
}
Dropdown {
margin-left: auto;
}
...etc...
This is not a big deal at all, I just want to (a) understand why people do it before I call it a bad practice and (b) if it’s a bad practice, steer people away from it (extra components, cluttered Project Browser, etc).
I do it because it allows me to use the anchors to adjust the space, rather than by modifying, potentially multiple components styles to obtain the same result. Though, I generally use flex containers rather than labels.
It is also easier for non-initiated to see “where” the space is coming from. Not to mention that the difference between padding and margins is often misunderstood by those new to web development.
I’m not sure I would classify it as bad practice, although there could be some argument made as to additional component loading time effecting performance I suppose. And it can definitely hinder organization in the project browser.
Yes, what you say in the first paragraph is true, but it seems like adding a style is much easier (especially inline) than adding a component. Also, regarding the point about it being easier to see - a new developer would still need to understand grow: 1; shrink: 1; basis: auto on a spacer component; I feel like it is better to learn margin: auto or the justify-content / align-items properties once and develop good habits than to clutter the Project Browser. Right? Maybe I’m missing something…
I don’t think you’re “missing” anything. I think it’s just a tradeoff; using labels as spacers is “easier” to understand for folks less accustomed to the web world, so might be more maintainable. Using CSS & layout properties is cleaner (and more performant) but marginally () less approachable for someone who isn’t used to how it works.
I would go with what you’re comfortable with that’s also going to be maintainable down the road.
That makes sense to me! I just wanted to make sure I wasn’t missing out on a useful hack / workaround that unlocks some functionality I didn’t know about.
You might also notice that the vision templates call system.alarm.queryStatus from the gui (which is very bad practice).
I would always recommend designing for performance from the start, not having to go back and fix things up after the fact. And in this case, adding more components will reduce performance, if only "margin"ally (), and the good practice way is to use CSS.
Also, don’t forget the gap CSS prop! Super useful for adding a fixed margin between all components in a flex container
) less approachable for someone who isn’t used to how it works.
), and the good practice way is to use CSS.
extremely helpful!!