They Say: Do Not Use Margins in CSS. How I Use Them Anyway (wolfoliver.medium.com)

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

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.

Isn't this just padding with extra steps?

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.

    button {
        margin: 1em;
    }

    .someparent button {
        margin: 1em;
    }

Since when are margins not cool?

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.

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 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!