4 ms·

They Say: Do Not Use Margins in CSS. How I Use Them Anyway

26 points by WolfOliver 5y ago

throwoutway 5y ago
Margins are amazing. I’ve been using margins in CSS for over 20 years and it’s fine. Though I don’t use any fancy frameworks or things where encapsulation, copy/paste, etc will cause problems. If you code HTML&CSS with W3C standards, you’ll be happier. Maybe I’m an old timer
- atoav 5y ago
  Has nothing to so with age, I am relatively young and I try to go for HTML + CSS with minimum sprinkles of (vanilla) javascript too. The only thing that I tend to use is a reset.css, everything else I write on the fly.
gherkinnn 5y ago
Where are the respective styles kept? Are they in container.css, in which case container knows of .reusable-component. Or does reusableComponent.css know about each and every possible container? Will there be a containerPlusComponentCombo.css that juggles common rules? The problem remains even if you prefer grouping css rules in one large file over many small files. You end up tying yourself in to knots as either parent or child requires knowledge of the other. Sometimes it is perfectly valid. But it is not truly reusable. It doesn’t scale well and requires unnecessary mental overhead. Instead, why not build a layout container that works for everything? .container > * + * { margin-too: var(--sp-md); } (Use the new-ish gap rule if you like, but I forgot the details and I’m tired) It is just as semantic (whatever that means) as in the article and doesn’t needlessly couple things together.
- 10x-dev 5y ago
  This css selector looks like it would be slow, which, if true, would be one reason not to use it.
  - gherkinnn 5y ago
    The difference in selector speed is negligible. Choosing minimal perf gains over greatly improved ergonomics is pain. It was last an issue with IE7 and 8 [0], an era we don’t like to talk about. 0 - https://web.archive.org/web/20130508170505/https://developers.google.com/speed/docs/best-practices/rendering https://web.archive.org/web/20130508170505/https://developer...
    - eurasiantiger 5y ago
      Did you just call eliminating quadratic behaviour a negligible gain in the context of graphics rendering? I’m pretty sure you’re wrong there.
marcofatica 5y ago
Isn't this just padding with extra steps?
- JellyBeanThief 5y ago
  No, because the `container` element uses `margin` and not `padding`. This results in margin behavior, where two adjacent containers with `margin: 10px` will have only 10px between them instead of 20 like with padding.
montroser 5y ago
Judicial use of utility spacing classes is a pretty good option here. Instead of... .btn { margin: 8px; background: whitesmoke; } <button class="btn">Send</button> Use utility classes in the markup rather than spacing in the reusable definition... .btn { background: whitesmoke; } .m-8 { margin: 8px; } <button class="btn m-8">Send</button> This approach yields decent readability, fewer elements than if we needed containers wall around, and good flexibility for many contexts and situations.
- atoav 5y ago
  Short question: Why not select the button element in this case — if you already want to select all of them anyways? button { margin: 1em; } or if you just want certain buttons .someparent button { margin: 1em; } I tend to use classes only to specify the identity of a thing: so something like .close-button or similar.
  - montroser 5y ago
    In a smaller project, styling all buttons might be a fine/good way to do it. But in a larger project, it is inevitable that you will have buttons which you actually don't want to inherit your global styles, and it's a pain and messy to have to override/undo the styles. Like, you bring in a third-party video player, or checkout form, or chat client, and it's busted because your global margin button styles are leaking in. As to why not scope with .someparent, it can work, but if you already have spacing utility classes ready to go, it's easier to just add the three characters in the class. And as a bonus, when you add another button somewhere else nested way deep under .someparent, it won't accidentally inherit the margin you meant for the first button.
whalesalad 5y ago
Since when are margins not cool?
- sombremesa 5y ago
  Since they needed to be, for clickbait.
- WolfOliver 5y ago
  They are two sources linked in the article stating this. You should be able to finde some more if you google for it.
- davejitsu 5y ago
  If using margins is wrong, I don’t wanna be right
Nathanba 5y ago
These weird semi-ideological ideas like "don't use margins!" "don't use mocks!" that keep popping up sometimes are leaving me unfazed nowadays. I used to consider them all strongly and weigh the pros and cons but now I feel like I have gained the experience to realize what this is really likely about. I think people come up with this stuff like they come up with political ideas at a bar. They don't actually believe this stuff strongly, it's just some random thing they thought up in the moment and then 5 years later they probably realize that they kept using margins all over their code but no, they didn't bother updating their blog post to do a mea culpa .. of course they didn't.
deleted 5y ago
[deleted]
hamedb 5y ago
the title is a bit clickbaty, it should be written as: where to use margins when building web components. you are just saying that you have to place margin in the container of the component not inside it. that's it! Anyways, I think the answer is "it depends" and there's no silver bullet when it comes to micro CSS details. CSS is always controversial when it comes to how structure it and I don't think this type conversations are useful or add anything to front end. it's just a waste of time as the end result only matters. we can argue for days to both sides on where to place margins and we will never find the "perfect" way. I am a big believer front end developers will move to low code tools for CSS such as https://intab.io https://intab.io to style their CSS in the near future and focus more on the end result rather than waste time arguing on this micro details. take a way, focus on the end result rather than these trivial things!

26 points by WolfOliver 5y ago

Margins are amazing. I’ve been using margins in CSS for over 20 years and it’s fine. Though I don’t use any fancy frameworks or things where encapsulation, copy/paste, etc will cause problems. If you code HTML&CSS with W3C standards, you’ll be happier. Maybe I’m an old timer

atoav 5y ago
Has nothing to so with age, I am relatively young and I try to go for HTML + CSS with minimum sprinkles of (vanilla) javascript too. The only thing that I tend to use is a reset.css, everything else I write on the fly.

gherkinnn 5y ago

Where are the respective styles kept? Are they in container.css, in which case container knows of .reusable-component. Or does reusableComponent.css know about each and every possible container? Will there be a containerPlusComponentCombo.css that juggles common rules? The problem remains even if you prefer grouping css rules in one large file over many small files. You end up tying yourself in to knots as either parent or child requires knowledge of the other. Sometimes it is perfectly valid. But it is not truly reusable. It doesn’t scale well and requires unnecessary mental overhead. Instead, why not build a layout container that works for everything? .container > * + * { margin-too: var(--sp-md); } (Use the new-ish gap rule if you like, but I forgot the details and I’m tired) It is just as semantic (whatever that means) as in the article and doesn’t needlessly couple things together.

10x-dev 5y ago
This css selector looks like it would be slow, which, if true, would be one reason not to use it.
- gherkinnn 5y ago
  The difference in selector speed is negligible. Choosing minimal perf gains over greatly improved ergonomics is pain. It was last an issue with IE7 and 8 [0], an era we don’t like to talk about. 0 - https://web.archive.org/web/20130508170505/https://developers.google.com/speed/docs/best-practices/rendering https://web.archive.org/web/20130508170505/https://developer...
  - eurasiantiger 5y ago
    Did you just call eliminating quadratic behaviour a negligible gain in the context of graphics rendering? I’m pretty sure you’re wrong there.

marcofatica 5y ago

Isn't this just padding with extra steps?

JellyBeanThief 5y ago
No, because the `container` element uses `margin` and not `padding`. This results in margin behavior, where two adjacent containers with `margin: 10px` will have only 10px between them instead of 20 like with padding.

montroser 5y ago

Judicial use of utility spacing classes is a pretty good option here. Instead of... .btn { margin: 8px; background: whitesmoke; } <button class="btn">Send</button> Use utility classes in the markup rather than spacing in the reusable definition... .btn { background: whitesmoke; } .m-8 { margin: 8px; } <button class="btn m-8">Send</button> This approach yields decent readability, fewer elements than if we needed containers wall around, and good flexibility for many contexts and situations.

atoav 5y ago
Short question: Why not select the button element in this case — if you already want to select all of them anyways? button { margin: 1em; } or if you just want certain buttons .someparent button { margin: 1em; } I tend to use classes only to specify the identity of a thing: so something like .close-button or similar.
- montroser 5y ago
  In a smaller project, styling all buttons might be a fine/good way to do it. But in a larger project, it is inevitable that you will have buttons which you actually don't want to inherit your global styles, and it's a pain and messy to have to override/undo the styles. Like, you bring in a third-party video player, or checkout form, or chat client, and it's busted because your global margin button styles are leaking in. As to why not scope with .someparent, it can work, but if you already have spacing utility classes ready to go, it's easier to just add the three characters in the class. And as a bonus, when you add another button somewhere else nested way deep under .someparent, it won't accidentally inherit the margin you meant for the first button.

whalesalad 5y ago

Since when are margins not cool?

sombremesa 5y ago
Since they needed to be, for clickbait.
WolfOliver 5y ago
They are two sources linked in the article stating this. You should be able to finde some more if you google for it.
davejitsu 5y ago
If using margins is wrong, I don’t wanna be right

Nathanba 5y ago

These weird semi-ideological ideas like "don't use margins!" "don't use mocks!" that keep popping up sometimes are leaving me unfazed nowadays. I used to consider them all strongly and weigh the pros and cons but now I feel like I have gained the experience to realize what this is really likely about. I think people come up with this stuff like they come up with political ideas at a bar. They don't actually believe this stuff strongly, it's just some random thing they thought up in the moment and then 5 years later they probably realize that they kept using margins all over their code but no, they didn't bother updating their blog post to do a mea culpa .. of course they didn't.

deleted 5y ago

[deleted]

hamedb 5y ago

the title is a bit clickbaty, it should be written as: where to use margins when building web components. you are just saying that you have to place margin in the container of the component not inside it. that's it! Anyways, I think the answer is "it depends" and there's no silver bullet when it comes to micro CSS details. CSS is always controversial when it comes to how structure it and I don't think this type conversations are useful or add anything to front end. it's just a waste of time as the end result only matters. we can argue for days to both sides on where to place margins and we will never find the "perfect" way. I am a big believer front end developers will move to low code tools for CSS such as https://intab.io https://intab.io to style their CSS in the near future and focus more on the end result rather than waste time arguing on this micro details. take a way, focus on the end result rather than these trivial things!