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:
- Where on earth do I start?
- 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.
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.
Smoothie splits your design into 3 key layers, imported in the following cascade order:
An intrinsic collection of human-readable values that define your project/Design System’s visual language.
Common styles, objects and utilities to form a solid foundation.
The individual building block that make up your UI.
Fancy diving in straight away? Check out some of these example projects: