Using presentational classes makes web design easier

I wrote about how using purely presentational classes in HTML is a good thing, how they help align your HTML attributes and tags to their intended purpose.

So what’s it like actually using a low level, non-abstracted CSS framework like Tachyons? Does it make designing (i.e. building web pages for a specific purpose) any more efficient?

We’ve been building the new work site using Tachyons, so we’ve now got some ‘real life’ experience. First impressions are good.

Why? Well, the reason’s quite subtle: it’s to do with the amount of brow-furrowing it removes, or how you feel writing your HTML. It’s like when a designer gets font size, line height, measure and white space right to make reading from a screen easier. There’s less effort and stress.

When you use presentational classes you’re styling the thing on the page in front of you in a predictable way. So typing mt0 in your HTML has an immediate effect: the thing you’re adding it to will have a top margin of 0. There’s no translation, reference or counter-intuitiveness; instead, there’s a direct relationship between writing and its effect.

When you use an abstraction (such as panel) you’re removing the predictability as you can’t tell what the top margin is without referring to your CSS or by opening an inspector. If you style something like an ARIA role, or a ‘semantic’ class like entry-content, you’re making things difficult in 3 ways:

• Again, you can’t tell what the class/attribute actually does to an element
• You’re styling things elsewhere, or that don’t even exist yet
• You might want to style something else in the same way but which doesn’t have the same ‘meaning’

We lost this intuitive element of design when we ditched (quite rightly) elements like font. We could no longer decide I want to make that text red and make it red straight away. Conversely, if someone looked at our HTML they couldn’t tell what the classes actually did.

We decided to try and make classes mimic and augment elements, rather than simply do their more natural job of determining what an element looks like.

The appearance of your web page is no less important – or less meaningful – than its ‘semantics’. In fact, these little, presentational classes define a page’s meaning for users with a visual browser.