Skip to main content Skip to site Map

Bad example

  • Divorce styles and token names from markup completely
  • Directly styling headings forces heading order to lose meaning
h1 {
  font-size: 32px;
}
  • While this seems better, it really isn’t.
  • Even though class="h1" could be applied to any element, developers WILL interpret this as <h1 class="h1">
.h1 {
  font-size: 32px;
}

Good example

  • Set all headings to a small default to force devs to seek correct styles
  • Choose naming conventions without implied semantics
h1, h2, h3, h4, h5, h6 {
  font-size: 16px;
  font-weight: normal;
}

.text-display-huge {
  font-size: 48px;
}

.text-display-large {
  font-size: 32px;
}

.text-display-medium {
  font-size: 24px;
}

.text-display-default {
  font-size: 16px;
}
  • Styles are now separated from markup
  • This allows the preservation of good heading structure and flexibility in design
<h1 class="text-display-medium">
  Shop
</h1>

<h2 class="text-display-huge">
  Our biggest coffee sale of the year
</h2>

<h3 class="text-display-large">
  Light roast liquidations
</h3>

<h3 class="text-display-large">
  Medium roast markdowns
</h3>

<h3 class="text-display-large">
  Dark roast deals
</h3>

Shop

Our biggest coffee sale of the year

Light roast liquidations

Medium roast markdowns

Dark roast deals

Related heading & styles entries