A more accurate title for this blog post would be “Ban Outer CSS Margins from Components”.
Bingo. Author will be fighting an uphill battle on HN because of the lack of specificity (an appropriate problem for a CSS article)
Use spacer components instead of CSS margins (2020)
21–30 of 230 posts
Re: Use spacer components instead of CSS margins (2020)
#22Margin is generally more desirable than padding imo. Component/element knows the content it contains and uses margins to require a minimum amount of spacing. It avoids the need to make decisions on the spacing between every combination of components. Padding only works if you know everywhere your component might be used or don't mind remaking spacing decisions every time you use it. In my experience minimizing code n…
[deleted]
Re: Use spacer components instead of CSS margins (2020)
#23A more accurate title for this blog post would be “Ban Outer CSS Margins from Components”.
Yes, that title fits better with the content of the blog post and is a statement I would readily support. Leaving spacing to be the concern of the parent element makes eminent sense, and spacing components is a good way to do that which happens to be used by drag-and-drop editors like Squarespace.
Re: Use spacer components instead of CSS margins (2020)
#24Margin is generally more desirable than padding imo. Component/element knows the content it contains and uses margins to require a minimum amount of spacing. It avoids the need to make decisions on the spacing between every combination of components. Padding only works if you know everywhere your component might be used or don't mind remaking spacing decisions every time you use it. In my experience minimizing code n…
The word padding isn't in the article...
He reccomends spacing at the parent
Re: Use spacer components instead of CSS margins (2020)
#25I like the approach that Cube CSS takes (https://piccalil.li/blog/cube-css/#heading-composition) where margins are considered part of the overall layout rather than at the component level
Re: Use spacer components instead of CSS margins (2020)
#26Re: Use spacer components instead of CSS margins (2020)
#27A more accurate title for this blog post would be “Ban Outer CSS Margins from Components”.
Bingo. Author will be fighting an uphill battle on HN because of the lack of specificity (an appropriate problem for a CSS article)
Or people could just read the very short article instead of instantly assume stuff based on the title here.
Re: Use spacer components instead of CSS margins (2020)
#28Earlier quoted context omitted.
Bingo. Author will be fighting an uphill battle on HN because of the lack of specificity (an appropriate problem for a CSS article)
Or people could just read the very short article instead of instantly assume stuff based on the title here.
Good luck with that…
Re: Use spacer components instead of CSS margins (2020)
#29So 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.
> So ban a huge part of the CSS box model.
Yes, why not?
While eliminating them is hard, the argument here makes perfect sense. We've all been fighting margins one way or another. One could even argue that negative margins are a symptom of the problem.
When you use negative margins you're pulling the element out of the box and essentially causing overflow. Does this fix the issue sometimes? Sure. Is it the best option? Maybe it should just be the exception.
Re: Use spacer components instead of CSS margins (2020)
#30Earlier quoted context omitted.
Bingo. Author will be fighting an uphill battle on HN because of the lack of specificity (an appropriate problem for a CSS article)
Or people could just read the very short article instead of instantly assume stuff based on the title here.
The article's own title is "Margin considered harmful" and the body finishes with the sentence "Ban margin."