The first thing I want to point out is that the functional-styles file contains a lot more classes than the traditional-styles CSS file. And that probably seems overkill right now. Bear with me.

Say we now want to create a second component:

You can see that the traditional CSS from both of these components has some duplication, but the functional CSS reuses some of the classes:

That's not an exhaustive list. There's a lot of reuse going on here, and that's only with two components. Imagine how much reuse would be going on with a whole apps worth of components!

Tachyons to the rescue

You might be thinking, how do I write all of these functional css blocks?! How do I know which ones I need???

The great news is, YOU DON'T HAVE TO! Someone else has done it for you! There are a handful of libraries that contain most of the classes you'll ever need. Yeah, sure, they're not exhaustive, they don't cover every possible style that you might want to apply, but the large majority of useful effects are there.

Tachyons is one such library. I've used it in a few projects, and found it to be incredibly useful.

To demonstrate how effective Tachyons is at speeding up your workflow, I timed how long I spent working on each aspect of the Frello app:

Here are the results:

By far, traditional CSS took the longest time to do. It even took more time than building the functionality of the app! Maybe this says more about my ability to write plain CSS than anything else, but it's clear that styling Frello with functional CSS was a much quicker process.

I spent almost twice as much time writing traditional CSS compared to adding Tachyons classes to components. The glaring difference here is that I didn't actually have to write much CSS when using Tachyons. If I'd written all the functional CSS classes from scratch, I expect it would've taken a lot longer.

Why should you care?

So what I'm trying to advocate here is taking advantage of the work that others have done in building functional CSS libraries. They're built on solid foundations in design, people have spent many hours thinking about how these libraries should be built, and what the most useful classes will be.

And it's not just the classes that are useful, but the fundamental design principles behind Tachyons. All of Tachyons spacing and sizing classes (think margin, padding, and font-size) are based on scales.

To be precise, Tachyons use 'rem' for all sizes and spaces making them relative to your apps root font-size. The default root font-size is 16px, so if you don't change this you'll have a four-based scale, meaning all spaces and sizes are multiples of four.

Apple and Google use a four-based scale in their products, and they know a thing or two about design!

"Using a consistent spacing scale also promotes maintainability through ratios by making layouts more predictable and more likely to "fit" and align well."  -- Jina Anne, DesignBetter.Co

This is important because it gives rhythm and balance to your design and layout.

Tachyons Font-Size Scale

Tachyons Font-Size Scale

Using scales also helps you avoid magic numbers. Those constant numbers that hang around in your CSS and make things "work".

Tachyons Padding Left Scale

Tachyons Padding Left Scale

Another key advantage of using a functional CSS is library is that it can speed up your development workflow by reducing tab-switching. This is particularly noticeable when using a framework such as React, where your templates are inside your JS files.

With functional CSS, you can write the functionality, build the template, and style your component in a single file! As I demonstrated above, this can significantly reduce the time you spend building a component, while maintaining high quality output.

Tachyons Schmachyons

"But functional CSS doesn't scale… If you need to update a button that's used all over your app, you'll have the change the class on every single instance of that button!"  -- Developer friend of mine

This is a very valid concern. But I'd say to this, review the way you're building the app. If you have the same button throughout your app, then make it a component. Insert the component everywhere you need it, and when you want to update its styles, change the classes on the component!

There are a lot of classes in Tachyons, and it can be difficult to know which one you need to apply at first. And it can be difficult to know what the class even does.

What does "bn" do? Or is "fw7" for that matter?

Tachyons documentation is useful, but can be difficult to navigate, especially if you're trying to find out what a particular class does.

Luckily, there's a very useful tool, Tachyons TLDR, that can help you get to grips with many aspects of Tachyons, including the class names and the scale system. Personally, I found it very useful.

Another common complaint about functional CSS libraries is that they're very opinionated, and only offer you a limited selection of classes.

If you've struggled with this, I have good news! You can customize Tachyons, and generate a stylesheet based on your own config using tachyons-generator!

There are other functional CSS libraries available, some of which are highly customizable:

There are options available for you to get the functional CSS library that suits your needs.

Say "Yes" to functional CSS

So why do it yourself if you don't have to? Spend your energy building functionality in your apps, not writing CSS that's probably a near duplicate of another CSS class you wrote in some other project.

Save time in your workflow by reducing tab-switching, and apply solid design principles to your work without spending the next 4-years getting a degree in design.

Bring Tachyons with you, or any other functional CSS library for that matter, and simplify styling!

Resources