BEM has been our go-to solution for writing CSS for a number of years now. We’ve had some good and some not-so-good experiences with it, but overall it’s proven to be a very reliable approach to writing CSS for the kinds of projects we do.

It was about a year ago that I first heard about Tachyons through Twitter. At the time it was clear the community was divided over whether it was a good idea or not…

From what I could tell, the people able to get over their hesitation, and actually try it out, only had good things to say off the back of it. I was still unsure, but at the same time intrigued, because it wasn’t the first time I’d seen people talking about atomic CSS again.

Some of the comments from those people really stood out to me — they appealed to many of my own frustrations about how I was writing CSS at the time. I could see promise in Tachyons, and in that an opportunity to change the way we do CSS at Made by Many for the better.

My initial skepticism was a feeling shared amongst the developers here. The impression I got was that atomic CSS was a relic of a bygone era of CSS, where things were messy, unorganised and not really suited to big projects. Despite the underwhelming response I was resolute, and I decided to put it to the test to see if it was worth the bother. My initial experience with it ended up as good as I’d hoped — I was absolutely delighted with it. I just had to convince everyone else…

What I enjoyed most about Tachyons was its simplicity and how productive I felt using it. It also offered some perspective on BEM: above all was that I no longer had to think about how to organise my CSS. I didn’t have to think about what to name my ‘components’, where to draw the line between one component and another, what should live where, and crucially, how to refactor things when new requirements came in. This is the biggest sticking point for me with BEM because it often seems like a huge overhead. These points are especially true for applications that change over time, which is all-too-common in the kind of work we do.

With Tachyons I found that the abstractions are already figured out for you, allowing you to get a long way without having to write any CSS at all. I also found that if I wanted to adapt a style I already had for something new or slightly different, I didn’t have to think about how to refactor what I already had, nor did I have to duplicate any CSS to do it. I could just copy-paste the HTML and make changes without any hiccups. It gave me much more fine-grained control over what I was doing without any additional CSS.

I managed to convince my colleagues that Tachyons would be a good fit for a big client project, having only used it for relatively small projects up until that point. Looking back now, the key takeaway — which was actually quite a surprising one — was that it changed the way I worked with my designer colleague, Mike. Mike really understood Tachyons — he got the patterns, the terminology and the constraints, and was able to make them part of his own process. He didn’t understand the technical detail, but that didn’t matter. The nature of Tachyons meant he didn’t need to.

The beauty of Tachyons is that it simplifies tasks and allows for easier conversations between designers and developers. We found that it presented a language of its own that we could use to communicate in what we were doing. We started to say things that implied ‘Tachyon’ was a unit of spacing, so where before we might have said things like “Add a few pixels here” or “Just a bit more padding there” we were now saying things like “Make that two Tachyons there” “Hrmm, no — maybe just one”. What Tachyons gave us was a strong, commonly-understood baseline to work from, which ultimately allowed us to get things done very quickly and efficiently, to a standard we were both happy with.

With the experience I now have with Tachyons I would say the main drawback is that it’s not very straightforward to extend. For example, imagine you’ve been given a design for a button with completely custom gradients and animations to implement. The way to do this with Tachyons is to evaluate its attributes, figure out which bits Tachyons can do by default — like colours and padding — then fill in the blanks by coming up with your own ‘atom’, or series of atoms, to do the rest. I found that to be unintuitive and often felt as though I was bending the rules to achieve the right level of fidelity. On my last project I ended up with poor names for things that didn’t really fit the ‘atomic’ paradigm. Time was tight and I felt that I was spending too much time thinking about how to piece everything together in the ‘right’ way.

Tachyons excels at layout because it has all the building blocks to do just about anything you need to do in this respect by default. But beyond layout, if you’re working off a design file that lots of work has gone into — as my above example suggests — it begins to get a lot trickier. For me, it was at this stage that I started to feel uncomfortable with Tachyons. It was as if my woes about abstraction in BEM had come back to haunt me. That wonderful sense of productivity I had at first seemed to fizzle away.

On the flip side this makes Tachyons a great companion to prototyping, in cases where there’s little to no design to work from. What it does have as standard in the way of styling is more than enough to make something look great without having to think too much. It’s in these situations that I’ve had most success and enjoyment working with Tachyons, purely because I haven’t hit the hurdle of having to customise and extend it to meet outside expectations.

Despite my hang-ups with Tachyons I would definitely consider using it in the future. What’s clear to me now is that BEM and Tachyons solve different problems. There are strong merits to both approaches which I’m certain could be combined to get the best of both worlds.

Tachyons isn’t quite the silver bullet I hoped it would be but I’ve enjoyed the opportunity it’s given me to explore new ideas and evaluate our approach to writing CSS in general. If you’ve thought about trying out Tachyons then do — it’s a lot fun and it will undoubtedly change your perspective on CSS.