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.

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>這是一個演示！繼續(xù)嘗試使用變量！ CSS Houdini 打開了模塊化、可配置樣式共享的大門。我期待看到開發(fā)人員使用和共享CSS Houdini worklet。我正在嘗試添加更多有用的Houdini 使用示例。如果您有任何想法或想為此存儲庫貢獻代碼，請與我聯(lián)系。</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!