Why functional CSS is a good idea

I struggled for a long time getting into designing more in the browser. For me the big hurdle was always the speed I could design in, and not learning either HTML or CSS. That’s no harder than learning a new design software. It was too time consuming to first markup a bit of content, then try to find reasonable names for the elements, and finally add the necessary CSS rules in a separate .css file. Even with tools like BrowserSync to reload CSS without a browser refresh, and huge frameworks like Bootstrap or Foundation, it was too slow, and I got frustrated and basically hating HTML and CSS.

Until I stumbled across Tachyons .

I could not believe the speed I could design things in the browser, and I couldn’t believe how much I was enjoying designing in the browser. Marking up and styling pages was actually fun. Who would’ve thought.

Functional CSS, you say?

Functional CSS is a relative new term (it’s not important what we call it), but the concept is that you build up your design with many small CSS utility classes directly in your HTML markup. The utility classes acts like properties on the HTML elements, which you can combine in endless ways to create the design you want.

It looks something like this:

<h1 class="f2 black-80 pv2 ph3 mb3 mw7 ttu center">Tachyons FTW</h1>

The first times you use it, you probably need to look up the properties/classnames in the well written documentation all the time, but after a while you learn to read it without problems. This is also a part of what makes it so great, I can instantly read what this would look like — even if someone else on our team wrote it.

A lot of people, our developers included, freak out when they see this at first. My response is always: just try it and see.

Naming things is still hard

There are a few reasons I’m now enjoying designing in the browser with functional CSS. Firstly it completely removes the surprisingly hard task of naming things. I can focus on the design, not diverting brain power to giving HTML elements and structures classnames. Or even worse, try to follow some complex naming convention like BEM.

One mental environment

I can do everything in one mental environment closest to the actual result I want: the HTML markup. No need to switch back and forth between .css files and .html files. It might seem like a small thing, but it pulls you out of your focus and flow, when you need to find the relevant part of the CSS to test out several different design options.

Love the constrains

I love the natural constraints I’m given by Tachyons. It can, of course, be expanded upon with whatever you want, but the base six (or so) font sizes and the base six (or so) spacing options, will get you a long way. I find it liberating figuring out the design within these constrains, and not worrying about micro design decisions at the outset.

Effortless consistency

In my experience the constrains creates consistency. Font size 2 is always the same size, no matter where I use it. It forces you to not create styling rules for every little exception.

You eventually need to expand the base styles, especially for colors, when you get into the fine details of the design. By using the same naming convention, and the functional approach, you further enforce the consistency as you add more CSS.

Forces component thinking

A typical criticism of functional CSS is that it won’t scale, because you add visual classnames to HTML markup, and not semantic “meaningful” classnames, which is hard to encapsulate into components. I think the opposite is true: by using functional CSS you are more likely to create reusable components, almost without thinking about it.

Create the smallest HTML components possible, and with the help of functional CSS, the design rules are automatically built into the component. Change the structure and design of a component in the same place, make more sense for components.

No more !important

Using functional CSS seldom leads to specificity conflicts (at least for me), so no more hunting for that nested CSS selector which overrides what you’re trying to achieve. Or giving up and add the much dreaded !important .

As little CSS as possible

After I discovered functional CSS I challenge myself to write as little CSS as possible. I find by using Tachyions, my CSS file size doesn’t increase, as more design and pages gets added. That’s good for both speed of development, and speed of page load for the end user.

If you’re struggling, like me, to find your balance with HTML and CSS, I recommend trying out Tachyons. I certainly completely changed the way I look at web development.