Use spacer components instead of CSS margins (2020)
1–10 of 230 posts
Re: Use spacer components instead of CSS margins (2020)
#2I mostly agree with this, but I would add a secondary construct on top of it. Sometimes you want collections of things to appear identical.
You might want a component, that as part of its own public API, abstracts away the usage of the spacing component (author calls this "Stack").
Ex: suppose you have a list of images and you always want them to be 8px apart. So you package up the Stack and an component, that takes an images[] array.
This prevents the issue where engineers use the raw Stack+Image "atom" components and define random spacing rules: say the spec is 8, some engineers use 6, others 10, etc-- then you have inconsistent spacing in your app.
Re: Use spacer components instead of CSS margins (2020)
#3So ban a huge part of the CSS box model. Got it... Margins are valid in many use-cases, specifically many people leverage them for typography. They can even still be valid with component-driven development as well.
Re: Use spacer components instead of CSS margins (2020)
#4A more accurate title for this blog post would be “Ban Outer CSS Margins from Components”.
Re: Use spacer components instead of CSS margins (2020)
#5mmm, spacer elements. the new 1999 is looking pretty awesome.
Re: Use spacer components instead of CSS margins (2020)
#6mmm, spacer elements. the new 1999 is looking pretty awesome.
Let's use
for vertical separation, just like the good old days!
for vertical separation, just like the good old days!
Re: Use spacer components instead of CSS margins (2020)
#7No post body was provided.
Re: Use spacer components instead of CSS margins (2020)
#8No post body was provided.
Re: Use spacer components instead of CSS margins (2020)
#9I think the main bugbear of margins that the article doesn't mention is margin collapse: I personally don't find the rules super intuitive and I would rather just be explicit with spacing than have the browser collapse things together!
Re: Use spacer components instead of CSS margins (2020)
#10mmm, spacer elements. the new 1999 is looking pretty awesome.
"Oh it's out of alignment again? Just add a few more spacer.gifs in that table cell. This design was so great until we let people edit the content."