Tachyons is also a code style. Breaking down components into their common denominators providing atomic classes that serve a single purpose.

Lets look at responsive columns:

<-- bootstrap -->

<div class="row">

<div class="col-xs-12 col-md-3">100/25</div>

<div class="col-xs-12 col-md-6">100/50</div>

<div class="col-xs-12 col-md-3">100/25</div>

</div>



<-- tachyons -->

<div class="cf-ns nl2 nr2">

<div class="fl-ns w-25-ns ph2">100/25</div>

<div class="fl-ns w-50-ns ph2">100/50</div>

<div class="fl-ns w-25-ns ph2">100/25</div>

</div>

These two grids do roughly the same thing. 3 columns respectively 25%, 50%, 25% on viewports greater than a tablet, and stacked on mobile. This is a great starting point but real life apps beyond an mvp NEVER stay with default components.

What if you want to change the grid?

padding? borders? colors?

With bootstrap you’d probably fire up a new scss file and add a class called “that-awesome-blue-column-thing” or hopefully instead more generic like “blue-grid-border”, or potentially update the variables in the scss and rebuild your stylesheets, nothing wrong with any of this… Except given a basic spec requirement would your entire engineering team create the same solution? The same class name? The same variable name? Go hunting to see if someone else has solved their problem already?

Most experienced people know that its almost impossible to expect similar outcomes without restrictions. (Have you seen CSS purge? Its a brilliant dive into the CSS overkill of popular startups.)

So thats how we got here? Yes that’s how we got here!

The problem is that most programmers end up adding colors, borders, font-sizes, padding, margin, position, display, etc. without much attempt to optimize their work. After all they’re busy working on features! I get it. Its hard to accurately clean up CSS files after yourself when moving at a fast pace. Especially given that UI and styling is almost impossible to test.

So what can we do?