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?

Contact List from the tachyons component library

Whoaaaa. My eyes!!

<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! 😒

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!

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.

2. How do you customise tachyons?

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

The pipeline setup. I never customise the core tachyons files.
Extending the `max-widths` 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.

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.

.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.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Simon Vrachliotis

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