The Alternative CSS principle

Most of the CSS frameworks I’ve seen include multiple options for styling elements. My own boilerplate—the file I use when starting most projects—includes multiple styles and many value options. Six text sizes from x-small to x-large, six possible spacing values, and multiple transition durations. It also includes several figure configurations, image styles, and tables.

If I don’t need any of these styles, I should delete them to help performance. If I do need this many options, I really should be rethinking my design and how I implement it.

Two typefaces, two colours, two weights, with two line-heights could/should be all I need. Two background colours, two border colours, two widths, two radii should be enough. One blockquote, one figure, one image, one table, plus one alternative for each. Most designs need only need one default and one alternative style for every element.

---

This approach to CSS starts with a simpler set of Custom Properties, starting with default and alternative values:

:root {
--font-family-default: 'Merriweather', serif;
--font-family-alt: 'Merriweather Sans', sans-serif;

--font-color-default: #b1a18;
--font-color-alt: #f5f5f3;

--font-link-default: #a62339;
--font-link-alt: #a62339;

--font-weight-default: 400;
--font-weight-alt: 700;
}

The same principle applies to background and border colours, and radii, and widths.

I set out my default styles in the main part of my stylesheet plus one alternative style for each element. I use a simple .alt class and combine selectors. I add that class to element selectors to style alternative headlines:

h1 {
color: var(--font-color-default); }

h1.alt {
color: var(--font-color-alt); }

I change the alignment of blockquote citations the same way:

blockquote.alt cite {
text-align: right;
/* Text styles */
}

When a default style is applied using an ID or class selector, I add the alt class by stringing those two selectors together:

.lede.alt {
color: var(--font-color-alt); }

This alternative approach simplifies my design, reduces the number of styles I need, and offers a simpler approach when writing HTML. I needn’t think of a dozen descriptive class attribute vales, I only need to write alt. I can apply alt to multiple elements in HTML and then let CSS classes do the work:

<h1 class="alt">…</h2>
<h3 class="alt">…</h3>
<blockquote class="alt">…</blockquote>
<table class="alt">…</table>
<p class="lede alt">…</p>

My boilerplate still includes multiple style options for when I need them—for example styles for larger lede and standfirst paragraphs, and several list styles—but I keep these to as few as possible.

I’ve used this alternative approach to CSS. It works, and I’ve reached the conclusion that I need just a fraction of the styles I used to include in my boilerplate and websites. Reducing the amount of CSS I write isn’t just good for performance, it’s good for design too. It helps to clarify thinking about what makes a good default style and what an alternative needs to achieve.

If you like the look of this approach, I’ve made my current CSS boilerplate into a Gist.