Full re-write in 10 days with tachyons and functional CSS: A case study (Part 4)

This is the final chapter of a 4-post series, taking you through a website refactoring process using tachyons.

On the menu

Chapter 4: The aftermaths — key learnings and recommendation

1. How do you deal with the repeating classes and overwhelming, “ugly” HTML markup?

Template abstractions to the rescue.

Show me how!

Contact List from the tachyons component library

Whoaaaa. My eyes!!

Building class combos.

<li class="{{ combo.listItem }}">

What?! Isn’t that besides the point? You just lost the declarative aspect of functional CSS!

Well done, champ. You’ve just recreated semantic classes. Way to chase your own tail! 😒

Trade-offs, again.

Pros

Cons

Lesson learned with class combo abstraction

In the excitement, I possibly went a bit overboard, and got a bit too “abstraction-happy”.

Don’t abstract the outside vertical spacing!

What about consistent vertical rhythm?

You’ll run into edge cases where you need to display the same module without a bottom margin, because of the specific context you’re trying to display it in.

Here’s what it looks like

2. How do you customise tachyons?

Tachyons proposes a consistent naming convention, and encourages you to follow the lead.

The way I did it.

The pipeline setup. I never customise the core tachyons files.

Extending a module

Extending the `max-widths` module.

Rewriting a module

The core `box-shadows` module, not needed.
The module is commented out in the core pipeline.
A custom `tachyons-extend/box-shadow` module is created.

3. What about good ol’ regular, non-functional CSS?

Let’s make it clear: functional CSS does not prevent you from writing regular CSS in parallel.

Write your own CSS when needed. But keep this in mind:

If you know exactly what you’re doing and why you want global styles in specific areas, by all means go ahead.

Would I do it all over again?

What would I do differently the second time?

Build mobile-first components, from the get go. Don’t wait.

You’re working so fast, it becomes far too easy to get caught in the “let’s build it on desktop first, then go through it again at different breakpoints” approach.

Why is this such a big deal?

.mv5 {
margin-top: 8rem;
margin-bottom: 8rem;
}
<section class="mv5">
...
</section>
<section class="mv4 mv5-ns">
...
</section>
section {
margin-top: 4rem;
margin-bottom: 4rem;
}
@media(min-width: 40rem) {

section {
margin-top: 8rem;
margin-bottom: 8rem;
}
}

Closing words

Functional CSS is not a fit for every taste and every team. In our particular context, I personally found it to be bringing an incredible amount of benefits, without showing any signs of major drawbacks.

Swiss Front-end designer/developer based on Sydney’s Northern Beaches. Proud father of two. Surf, basketball, ukulele addict. Love learning, love teaching.