CSS-in-JS: A Middle Ground

Please note: this is a condensed write-up, see smoothie-css.com or GitHub for full documentation.

The current CSS landscape is thriving and overflowing with new concepts and tools, but this often leads to two scenarios:

  1. Where on earth do I start?
  2. How can I regularly experiment with new tools without having to completely refactor my existing project styles?

Introducing Smoothie 🍹
A deliciously scalable and adaptable stylesheet methodology.

Smoothie’s 3-layered architecture gives you the freedom to easily build and experiment with the CSS tool/s that you want to use.

Why?

The passionate debate around latest CSS tools/techniques can at times feel hostile and overwhelming.

Certain methods may offer more advanced features but it mostly boils down to a matter of preference.

This project came about after feeling fed up with being told what is “right” or “wrong” when it comes to using CSS tools. Just because one method feels right for your project, it doesn’t justify putting down the solutions of others.

What I hope to bring with Smoothie is a middle-ground; the freedom and encouragement to experiment with tools/techniques to figure out what’s right for you.

Architecture

Smoothie splits your design into 3 key layers, imported in the following cascade order:

  1. Tokens
    An intrinsic collection of human-readable values that define your project/Design System’s visual language.
  2. Global
    Common styles, objects and utilities to form a solid foundation.
  3. Components
    The individual building block that make up your UI.

Recipes

Fancy diving in straight away? Check out some of these example projects:

  1. JSON, SCSS and Styled Components — Live Demo
  2. SCSS — Live Demo (Project Docs)

For more resources and information, head over to smoothie-css.com or GitHub

Still not sold? Ping me a tweet.

Like what you read? Give Joe Bell a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.