CSS Houdini Could Change the Way We Write and Manage CSS

CSS Houdini is probably the most exciting advance in the CSS field. Houdini consists of multiple independent APIs, each delivered to the browser separately, and some APIs have been delivered (see this for browser support). The Paint API is one of them. I'm very interested in it and recently started thinking about how to use it at work.

One way I can do this is to use it as a way to avoid duplicate wheels. In this article, we will discuss this while comparing it to the methods we currently use in JavaScript and CSS. (I won't go into the depth of how to write CSS Houdini, as there are many excellent articles that have already been introduced to this, such as this, this and this one.)

Houdini brings modularity and configurability to CSS

The way CSS Houdini works brings two major advantages: modularity and configurability . Both methods can often make our lives easier as developers. We often see these concepts in the JavaScript world, but rarely in the CSS world… Until now.

The following table lists the workflow for some use cases, comparing traditional CSS with Houdini. I also added JavaScript for further comparison. You can see that CSS Houdini allows us to use CSS more effectively, similar to how the JavaScript world evolved into components.

	Traditional CSS	CSS Houdini	JavaScript
When we need common code snippets	Write from scratch or copy and paste from elsewhere.	Import a worklet.	Import a JS library.
Customize code snippets based on use case	Manually adjust the values ​​in CSS.	Edit custom properties exposed by the worklet.	Edit the configuration provided by the library.
Code Sharing	Share the original style code with comments on how to adjust each section.	Share the worklet (in the future, share to the package management service) and record custom properties.	Share the library to a package management service (such as npm) and record how it is used and configured.

Modular

With Houdini, you can import a worklet and start using it with a line of code.

 <code>CSS.paintWorklet.addModule('my-useful-paint-worklet.js');</code>

This means there is no need to implement common styles every time. You can have your own set of worklets that can be used for any of your projects and can even be shared with each other.

If you want to provide modularity for HTML and JavaScript in addition to styles, Web Components is the solution.

This is very similar to what we already have in the JavaScript world. Most people don't reimplement common functions, such as throttling or deep copying objects. We just need to import libraries, such as Lodash.

If CSS Houdini becomes more popular, I can imagine we will have CSS Houdini package management service where anyone can import worklets for interesting waterfall layouts, background patterns, complex animations, and more.

Configurability

Houdini works well with CSS variables, which greatly enhances its own abilities. Using CSS variables, users can configure Houdini worklets.

 <code>.my-element { background-image: paint(triangle); --direction: top; --size: 20px; }</code>

In this code snippet, --direction and --size are CSS variables that are used in triangle worklets (defined by the author of triangle worklets). Users can change properties to update how they appear, and even dynamically update CSS variables in JavaScript.

If we compare it again to what we already have in JavaScript, JavaScript libraries usually have options that can be passed. For example, we can pass values ​​to the carousel library for speed, direction, size, etc. so that it will be performed the way we want it to. It is useful to provide these APIs at the element level in CSS.

Houdini workflow makes my development process more efficient

Let's look at a complete example of how the entire process works together to simplify development. We will use the tooltip design pattern as an example. I find myself using this pattern often on different websites, but somehow every new project has to be re-implemented.

Let's briefly review my previous experience:

1. OK, I need a tooltip.
2. It is a box with a triangle on one side. I will use pseudo-elements to draw triangles.
3. I can use the transparent border trick to draw triangles.
4. At this point, it is very likely that I will dig out my past projects to copy the code. Let me think about it... this needs to be pointed upward, which side is transparent?
5. Oh, design borders that require tooltips. I have to use another pseudo-element and fake a border for the pointing triangle.
6. What? They decided to change the direction of the triangle? ! OK, OK. I'll adjust all values ​​of the two triangles...

This is not difficult. The whole process may only take five minutes. But let's see how to do better with Houdini.

I built a simple worklet to draw tooltips and provided a number of options to change its appearance. You can download it on GitHub.

Thanks to Houdini, here is my new process:

1. OK, I need a tooltip.
2. I'll import this tooltip worklet and use it.
3. Now I will modify it with custom properties.

<code></code>

Here is a prompt ``` CSS.paintWorklet.addModule('my-tooltip-worklet.js') .tooltip-1 { background-image: paint(tooltip); padding: calc(var(--triangle-size) * 1px .5em) 1em 1em; --round-radius: 0; --background-color: #4d7990; --triangle-size: 20; --position: 20; --direction: top; --border-color: #333; --border-width: 2; color: #fff; }

<code>这是一个演示！继续尝试使用变量！ CSS Houdini 打开了模块化、可配置样式共享的大门。我期待看到开发人员使用和共享CSS Houdini worklet。我正在尝试添加更多有用的Houdini 使用示例。如果您有任何想法或想为此存储库贡献代码，请与我联系。</code>

The above is the detailed content of CSS Houdini Could Change the Way We Write and Manage CSS. For more information, please follow other related articles on the PHP Chinese website!