I assume your talking about spacing within a component, eg. the space between a title and a text, etc.

I had the same dilemma.

// Sizing.
@mixin card-sizing($card-spacer-x, $card-spacer-y) {
  .card-title,
  .card-separator,
  .card-subtitle,
  .card-text,
  .card-element {
    margin-top: 0;
    margin-bottom: $card-spacer-y;
  }

  .card-subtitle {
    margin-top: -($card-spacer-y / 2);
  }

  .card-block { // I feel like this should not be there.
    padding: $card-spacer-y $card-spacer-x;
  }
}

.card {
  @include card-huer($card-background, $card-text-color, ...);
}

// Default sizing.
@include card-sizing($card-spacer-x, $card-spacer-y);

I designed this card components a while ago as a "one purpose - one look" component.. which was a mistake. I have a lot of themes to support with very different styles and each of them have their own requirements and look and feel.

At first, it bothered me a lot. Another mistake that I've done was trying to handle every possibility in the whole universe, even the most crazy one with the same monolithic stack of lines... It's good to think and anticipate some needs but I spent wayyy too much time doing that.

I ended up creating variants, with --modifier ; kind of BEM-style.

.card--vstream {
  @include card-huer($card-vstream-background, $card-vstream-color...);
  @include card-sizing($card-vstream-spacer-x, $card-vstream-spacer-y);
}

.card--event {
  @include card-huer($card-event-background, $card-event-color...);
  @include card-sizing($card-event-spacer-x, $card-event-spacer-y);
}

// etc.

I try to follow the ITCSS rules so I have:

• tools/cards.scss with the mixins
• settings/cards.scss with the (too?) many variables that you'll end up with 🙃
• components/cards/cards.scss with the component itself and the default variant.
• components/cards/variants.scss with well, all the variants (and I've got a lot, so this one will probably will be split in many files.

Outer-space now!

To handle space between my cards, I don't style them directly but embed them in another component named .gallery which can be a list, a grid, a scrolling list, etc. This component sole purpose is to handle scaffolding and spacing, not the card itself.

<div class="gallery gallery--vstream">
  <div class="gallery-item">
    <div class="card card--vstream">
      <!-- and so on -->
    </div>
  </div>
</div>

---

Does anyone have another way to deal with it? 🤐

This is where utility classes come into play:

<div class="spacing-bottom-sm">
    <ComponentOne />
</div>
<div class="spacing-bottom-lg">
    <ComponentTwo />
</div>
<ComponentThree />

The benefit here is that it keeps your components simple and allows you to space them differently in different pages/components.

For horizontal spacing, I recommend using/making a grid layout component that would allow you to set gutters. Take a look at Grid Styled if you don't have one already.

Keep in mind that you still want to keep your code DRY. If you're copying and pasting the same spacing and group of components a lot, then create a new component to contain them and stay consistent.

Simple margins in the component's CSS usually work just fine for me

margin: 10px 15px

Could you clarify what you mean by "different conditions"? When doing web work, I usually have different layouts for different screen sizes, but the spacing doesn't change when the page is resized.

I tend to place that spacing on the layout layers rather than the component layer, assuming you're talking about the space between components.

My grid system isn't a component and even if it was it could still have spacing parameters