CSS Houdini Will Be the Next Big Thing in CSS

What is CSS Houdini? And why will it be the next big thing in CSS?

I have recently come across CSS Houdini and I got very curious to learn more about it. The main goal of this article is to share with you what I have learned about this new addition to CSS and tell you why it is so exciting.

A couple of really extensive and beautifully illustrated articles on the nuances of Houdini can be found online but for those who want to get a general idea before diving into the details, this article will be a very good start.

There have already been predictions made that Houdini “will change CSS more than flex and grid combined together” so I will make you wait no longer!

Simply put, Houdini is a set of APIs that expose parts of CSS and enable Engineers to write code in JavaScript that the browser then parses to CSS.

This is done by extending CSS code with an interface called worklets, which are scripts that run when the page is being rendered.

With the help of worklets, we can directly change CSS variables. In other words, these APIs allow Engineers to manipulate style, animation, layout and add advanced custom properties, type checking and default values by hooking directly into the CSS rendering engine.

But, first of all, what is the benefit of modifying CSS directly instead of adding features on top of it with JavaScript, as we might be used to? The shortest answer is performance.

The browser creates two object models: the HTML markup is transformed into the Document Object Model (DOM) and CSS markup into a CSS Object Model (CSSOM), which are two independent objects.

JavaScript manipulates the DOM, which means that in order to apply any “corrections” to the DOM or the styles, the page needs to be loaded completely. When the DOM is manipulated with JavaScript, the page is re-rendered again.

If we were able to modify the CSS directly, re-render of the DOM would not be necessary. Using Houdini API methods, however, we tell the browser how to apply CSS during the rendering process, thus, avoiding the second re-render.

Another important advantage is modularity. Houdini helps us write snippets of code and import them as sharable modules, which is conceptually more similar to JavaScript than to CSS. Let us say, we want to create specific styles for a button component that we then want to use in different parts of our project.

Now we would most likely duplicate code by copy-pasting CSS. With Houdini, however, we could simply write a worklet with all the button styles defined and import them where they are needed or even share them among different projects.

Let us now take a very quick look at the APIs and what they have to offer. Houdini APIs can be separated into two categories: APIs that allow us to modify visible styles, layout, etc. and those that help us define types of specific properties and add custom properties and values.

Paint API. Allows us to modify visual properties, such as color, background borders and so on in the browser’s paint rendering stage;

Layout API. Lets us modify an element’s size and position (with the help of manipulating the CSS display property) in the browser’s layout rendering stage;

Animation API. Allows to animate elements in the browser’s rendering stage. It also enables us to listen to events, such as scroll, hover, click and so on and lets us run animations on its own separate thread, thus improving performance.

CSS Typed Object Model adds more semantic meaning to CSS values by exposing them as typed JavaScript objects.

CSS Properties and Values API allows extending CSS variables by adding their type, initial value and defining inheritance.

Now let us take a look at a couple of the APIs to get a taste of the syntax and what we can do with them.

Here is a simple example from CSS Properties and Values API, which we can us to give a structure to our custom properties.

Let us say that we have a CSS custom property (custom properties are prefixed with a “ — “)

 --myFavoriteColor: #0000ff;

We can then use this property as a variable

.div {
  background-color: var(--myFavoriteColor);
}

But what happens if we accidentally change –myFavoriteColor to 12px?

There is nothing that would warn us about the background-color now having an incorrect type and this line would simply be disregarded without us knowing it.

Houdini, however, allows us to define the type of this variable:

@property --myFavoriteColor {
 syntax: ‘<color>’;
 inherits: false;
 initial-value: #0000ff;
}

Now the browser knows what this particular property should be, how it should be parsed, if it should inherit its parents value and what its initial value should be, which is also the fallback in case it is overridden incorrectly or if there is an error.

Let us take a look at another quick example, this time at the Typed Object Model (Typed OM), which extends the CSS Object Model and exposes CSS values as a typed JavaScript object. This makes CSS look more like what we are used to in JavaScript and helps us access CSS values more easily and intuitively.

There are two main methods that we can use: attributeStyleMap, which allows us to get and set inline styles and computedStyleMap for getting computed and typed element’s styles.

This value can now be set using attributeStyleMap method:

document.querySelector('element').attributeStyleMap().set('font-size', CSS.percent(5);

and accessed the same way:

document.querySelector('element').attributeStyleMap().get('font-size'); // { value: 5, unit: percent}

clear, delete, has and append methods are also available.

Similarly, computedStyleMap method gets computes styles, after all calculations have been done (for example, converting percentage values into pixels).

Needless to say, the biggest fun and most opportunities for play and experimentation lay in high-level APIs, such as Paint, Layout and Animation.

However, they are also more complex to explain and showcase in such a short article.

Also, not all of them are currently supported in all browsers. However, if you are interested in the general Houdini idea, I highly encourage you to take a look at the documentation and examples of these APIs.

So, if it is the next big thing, why is everyone not talking about Houdini yet? Well, it is still very much in its development phase.

Not all Houdini APIs have been implemented yet and their support varies among browsers.

For example, Mozilla Firefox does not support any of the features yet. On this website you can check the overview of Houdini features being developed and which ones are safe to use.

In addition, code examples that can be found online are also subject to change. However, even if we cannot start using these APIs in production yet, it is something worth knowing about and watching out for. An interesting (and well-styled) future is awaiting us!

Build component-driven. It’s better, faster, and more scalable.

Forget about monolithic apps, start building component-driven software. Build better software from independent components and compose them into infinite features and apps.

OSS Tools like Bit offer a great developer experience for building component-driven. Start small and scale with many apps, design systems or even Micro Frontends. Give it a try →

An independent product component: watch the auto-generated dependency graph

CSS Houdini Will Be the Next Big Thing in CSS was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.

Post date January 25, 2022
Post categories In css, JavaScript, programming, software-development, web-development

This content originally appeared on Bits and Pieces - Medium and was authored by Lina Suodyte