Engineering

The journey of simplifying our CSS

Sebastian Hermida on Jan 17, 2017

Creating and publishing experiments is at the core of DNSimple. Through these little projects, we get to test, study, and refine who we are as a company. We also take these opportunities to play with new technologies or try a different angle on what we normally do every day.

For our latest side project, dnstudy, we wanted to try out a different way to write our front-end code, so we gave Tachyons a try. Tachyons is described as "Functional CSS for Humans". It was a refreshing and enjoyable way to work on this project.

The dark side of CSS

Plenty has been written on managing CSS code. Writing and organizing CSS on large projects is hard. It requires a lot of effort to keep the stylesheets clean and well documented.

Naming CSS is hard. Giving semantic names (describing the element, not what the element contains) helps, but sometimes you need a slight variation for a given element and you end up with either very bad names or a specificity problem.

In CSS everything is global, grouped through selectors. This can bring a lot of redundancy to stylesheets. A lot of redundancy brings bloat — heavier files for your browser to handle.

CSS is fragile. Pages and elements breaks easily and in the most unexpected ways.

Two CSS properties walk into a bar.

A barstool in a completely different bar falls over.
— Thomas Fuchs (@thomasfuchs) July 28, 2014

You have to pay attention to consistency. If you don't have a scale for paddings, margings, fonts, and z-indexes, things will get out of hand very quickly. You'll wind up with elements that don't exactly fit with each other because they have a slightly different padding, margin, or font-scale.

Frameworks

CSS Frameworks are great when you are starting a new project. You get to the point where you can show something very fast. But sometimes you get stuck in their documentation, because you are working with the framework's naming conventions and representations of elements.

You are forced to work against the framework as soon as you need to represent components differently than what the framework offers. The framework's representation of a "card" might not be yours. You might need something a bit different, so you start overwriting the parts that you want to change, which means tracking down what you want to override (or writing it from scratch), leading to writing more CSS and delivering heavier stylesheets.

Enter Tachyons

My first reaction to Tachyons was disbelief. The classes were so cryptic (and abundant)! Check out this example below, it's a card for a talk on dnstudy:

A dnstudy card

<div class="cf ba br2 b--silver">
  <div class="fl w-100 w-50-l">
    <h2 class="pa3 ma0 b f4 fw4">Everything You Need to Know About DNS in Five Minutes</h2>
    <span class="db ph3 ttu tracked f6 gray">slides</span>
    <div class="dt pa3">
      <img class="dtc br-100" src="https://secure.gravatar.com/avatar/31254903db793bf6f84bbd607fe092fd" alt="Anthony Eden" style="height:40px">
      <h3 class="dtc v-mid ph2 ma0 f6 fw5 gray">Anthony Eden</h3>
    </div>
    <div class="fl w-100 w-50-l">
      <div class="aspect-ratio aspect-ratio--4x3">
        <div class="aspect-ratio--object cover br2" style="background:url(/assets/images/dns-5-minute.svg) center;"></div>
      </div>
    </div>
  </div>
</div>

There is definitely a learning curve here! What does pa3, ma0, db mean? But you are going to have a learning curve no matter which framework you use.

The advantage here, is that once you know that pa3 means padding all the element with 3 units, and that db means display: block you can apply this knowledge everywhere.

With other frameworks, the card above might have been called card, with a need for a rigid HTML structure underneath with elements named card-title, card-subtitle, and card-author. But if you wanted to use card-author somewhere outside of a card, you may get stuck. You would have to search for something similar or, again, write your own.

The fastest prototype tool that I have tried

With Tachyons, because you focus on styling the element in the HTML, your focus stays in the HTML file instead of jumping between the CSS classes in both the HTML and the CSS files.

Tachyons brings consistency to our projects. We normally use a few scales: typography, spacing, and colors; however I found the scales in Tachyons better suited and easier to use than the ones I wrote. So I'll be switching to them in older projects.

The spacing scales and layout classes are probably the best gateway drug to Tachyons. Because Tachyons is modular, you can simply start with just that, and after a while, you might find it compelling to pull more of Tachyons into your projects. The documentation is fantastic and was very helpful to get us started.

Build, group, extract

We are continuing to use Tachyons on our upcoming projects, and experimenting with abstracting what we identify as big components into common classes; so it's easy for people starting on new projects to grab Tachyons with a short set of "DNSimple" styles to represent DNSimple concepts. This is a long term project, but you can check out our first steps in that direction today. We definitely don't want to create our own CSS framework…the world does not need another CSS framework.

These bigger components all start with Tachyons, so we are still experimenting how to scale them out.

If you are thing of giving Tachyons a try, I suggest you do. You might be surprised at the results. Start with our 5 minutes with Tachyons and let us know what you think.

Share on Twitter and Facebook