Stuff & Nonsense product and website design

Blog and all that malarkey

The Alternative CSS principle

Let’s face it, unless you develop a complex product—and even if you do—you probably don’t need half the humungous hunk of CSS you bung at a browser. In fact, it’s possible you only need one default and one alternative style for every element.

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.


Written by Andy Clarke who tagged this with css


More from Stuff & Nonsense

Andy Clarke demonstrates how to take your product and website designs to the next level.

Take your Squarespace designs to the next level with our premium Squarespace templates.

The popular web design contract template trusted by thousands of web designers and developers.

Andy is an experienced mentor who can help you improve your design skills and develop your career.


Hire me. I’m available now to work on product and website design projects.