← Back

Vertical Spacing

I’ve learned to treat my headings pretty abstractely. I don’t add a ton of styles on a naked h2, for example. Instead I put my styles on a classed .beta element so that I can re-use that style on a p or a strong element if the need arises. This works great and has really helped me keep my front-end as flexible as possible. Where it breaks down, for me, is when I start applying some vertical rhythm to the page. Sometimes I need an h2 inside a module to have no vertical margin because it has a bottom border, or some background box around it. In these cases I find myself overriding the defauts with junk like,

.beta {
  font-size: 48px;
  margin-bottom: 36px /* 0.75em */;
}
.beta-collapsed {
  margin-bottom: 0;
}

That gets a lot worse once you add breakpoints,

.beta {
  font-size: 48px;
  margin-bottom: 15px;
  @include breakpoint($large) {
    margin-bottom: 36px /* 0.75em */;
  }
}
.beta-collapsed {
  margin-bottom: 0;
  @include breakpoint($large) {
    margin-bottom: 0 /* specificity override */;
  }
}

Gross, right? Well, I’ve been exploring using unique classes for my vertical spacing too. I’m not sure what to name them yet, but I’m thinking something along the lines of,

.vspace-1 {
  margin-bottom: 25px;
  @include breakpoint($large) {
    margin-bottom: 50px;
  }
}
.vspace-2 {
  margin-bottom: 15px;
  @include breakpoint($large) {
    margin-bottom: 30px;
  }
}

Now I can do things like,

<h2 class="beta vspace-2">...</h2>
<div class="hero vspace-1">...</div>
<nav class="vspace-1">...</nav>

Now I have the flexibility to re-use my hero and beta elements wherever I need to without having to override anything.