CSS Houdini may be the most exciting development in CSS. Houdini is comprised of a number of separate APIs, each shipping to browsers separately, and some that have already shipped (here’s the browser support). The Paint API is one of them. I’m very excited about it and recently started to think about how I can use it in my work.
Houdini brings modularity and configurations to CSS
When we need a commonly used snippets
Write it from scratch or copy-paste from somewhere.
Import a worklet for it.
Import a JS library.
Customize the snippet for the use case
Manually tweak the value in CSS.
Edit custom properties that the worklet exposes.
Edit configs that the library provides.
Share code for the raw styles, with comments on how to tweak each piece.
Share the worklet (in the future, to a package management service) and document custom properties.
Share the library to a package management service (like npm) and document how to use and configure it.
With Houdini, you can import a worklet and start to use it with one line of code.
This means there’s no need to implement commonly used styles every time. You can have a collection of your own worklets which can be used on any of your projects, or even shared with each other.
I can imagine we could have CSS Houdini package management services if the popularity of CSS Houdini takes off, and anyone could import worklets for interesting waterfall layouts, background patterns, complex animation, etc.
Houdini works well with CSS variables, which largely empowers itself. With CSS variables, a Houdini worklet can be configured by the user.
A Houdini workflow makes my development process much more efficient
Let’s see a complete example of how this whole thing can work together to make development easier. We’ll use a tooltip design pattern as an example. I find myself using this pattern often in different websites, yet somehow re-implement for each new project.
Let’s briefly walk through my old experience:
OK, I need a tooltip.
It’s a box, with a triangle on one side. I’ll use a pseudo-element to draw the triangle.
I can use the transparent border trick to draw the triangle.
At this time, I most likely dig up my past projects to copy the code. Let me think… this one needs to point up, which side is transparent?
Oh, the design requires a border for the tooltip. I have to use another pseudo-element and fake a border for the pointing triangle.
What? They decide to change the direction of the triangle?! OK, OK. I will tweak all the values of both triangles…
It’s not rocket science. The whole process may only take five minutes. But let’s see how it can be better with Houdini.
I built a simple worklet to draw a tooltip, with many options to change its looks. You can download it on GitHub.
Here’s my new process, thanks to Houdini:
OK, I need a tooltip.
I’ll import this tooltip worklet and use it.
Now I’ll modify it using custom properties.
Here’s a demo! Go ahead and play around with variables!
CSS Houdini opens a door to modularized, configurable styles sharing. I look forward to seeing developers using and sharing CSS Houdini worklets. I’m trying to add more useful examples of Houdini usage. Ping me if you have ideas, or want to contribute to this repo.