Let's Talk About Tachyons CSS

A unique approach to styling markup

Project: http://tachyons.io
Repo: https://github.com/tachyons-css/tachyons/

At first glance, I had the same initial reaction as many: This is a mess. Why would someone do this? I hate sandcastles!

Then, like many, I had my Okay, wait, this is interesting moment.

I highly recommend watching this presentation by Adam Morse (the creator of Tachyons), at Devshop London, June 2016. He explains it much better than I can. I'm just going to tell you why I think it's unique.

The Styles, They Are A Changin'

Oh boy, do we love to argue about CSS. The arguments tend to carry heavy personal bias. If you use CSS, it's likely you've seen Tachyons come up in conversation. It's likely you've seen it come up in a positive or negative context based on the age of the person talking about it. I'm generalizing for the sake of this article, but I think it's a valid observation. I've noticed this in my own twitter feed. This tendency, regardless of the point being argued, usually indicates one very specific thing: change.

The distaste that some more seasoned front-end coders have for such a unique, nonsemantic approach like Tachyons lies in its divergence from what they see as a hard-faught war for semantic standards through the various generations of web design. This is a valid critique. Tachyons is a collection of nonsemantic, single-purpose classnames that get attached to markup elements. It's a pretty drastic change in the nature of your markup, if you use it.

Don't Say The "C" Word

The core of the debate is over the "C" in CSS. The cascade. This is thought to be the light saber of CSS. The thing that makes it unique, powerful and purposeful. The fact that Tachyons takes this on as a weak link (my words, not Adam's) is quite a brick through the window.

I've been using CSS for years. I love CSS. The cascade is muscle memory for me. It drives the way I build and use custom frameworks for client projects. I'm not really here to sell you in either direction. I just think the idea that Tachyons is presenting is new, different, and unique enough for us to take notice. I'll add that another reason to take notice is that, yes, it's those things, but it's also being presented by a very smart & skilled front-end developer.

Tachyons represents a radical shift in the way a few people are thinking about CSS. Again, I recommend you watch the video linked above. But the special thing I took away was how it occurred to Mr. Morse that one might stop writing CSS and, instead, use CSS. CSS is a finite language. I realize the "well actually" can of worms I'm opening with that statement, but let's keep it general. CSS does only so many things. Beyond that, it does unique things insofar as you create unique combinations of those finite things.

How DRY Is Your Waterfall?

Tachyons basically says "Here's everything CSS does, and here are the classes to do those things. Done." Your CSS framework is now DRY.

Perhaps this thinking aligns perfectly with the new wave of "Every front-end can be built inside a JavaScript library." It could be argued that Tachyons is very much a machine-think style of code. If you're generating styled markup components from inside a React framework, for instance, then perhaps repeatable, single-purpose classnames are logical building blocks.

I try to be careful enough to look with scrutiny on any new hotness in web design. I lived and worked through the Flash era. A lot of people in our industry have a huge crush on the JavaScript-driven front-end. The app ecosystem has made it's mark on the browser. But there are still a lot of designers who consider front-end development a combination of HTML, CSS and JavaScript. In that order. Oh look, another giant can of worms. Let's leave that one for another article.

I Can't Eat Another Byte

Tachyons takes on more traditional and popular methods of writing CSS in the way it addresses the problem of bloat. As you create more and more complex modules, with "traditional," semantic class naming, you have to repeat yourself. It's unavoidable. At some point, you'll have 10, 20, perhaps 100 different classes that all declare a common margin setting.

Enter Tachyons. There should be only one class that has margin-left: 0; And that would be the margin-left: 0; class. Get it? The concept is so obvious, it's almost silly.

What's Your Point?

I could go into a lot more detail about the inner-workings of Tachyons, but I'm just trying to constrain myself to "This is significant." Whether it's your new hotness, or you're just not ready to accept such a radical level of non-semantic shift, it's kind of a big deal. It's worth cloning and playing with. Evolution on the web (sorry for using that word, Mr. Siracusa) is always sparked by people trying to kick the status quo.