That's a great question. I attempted to answer a similar question here. Here's the relevant part:

Quick example: one thing I always struggle with is stuff like this: section { margin-bottom: 2em; }. In most cases, I want there to be some room in between major sections of the site. Except when I don't. Sometimes there are cases where I want the sections to be flush together (say if I'm applying background colors to the sections). I could hard-code , but that would become unruly pretty quick. A better option would be to make a modifier for the pattern called .section--flush or something along those lines. That way the pattern becomes more versatile and can address similar scenarios in the future.

So to answer your question, I typically add a modifier to a pattern that allows me to adjust the spacing of a component based on its usage. That being said, there's more than one way to skin this cat and I'm sure helper classes and other techniques could also be valuable.