Hi, I’m Casson.

How do you normally deal with CSS in a project?

As we know, there are some problems with native CSS, such as:

  • Style conflict is easy when reuse

  • No scope, no modularity

  • No programming skills

Many solutions have emerged from the community, such as:

  • Naming conventions (such as BEM conventions)

  • CSS Modules

  • CSS preprocessor (such as Less)

  • CSS In JS

  • CSS Framework (Tailwind CSS)

.

If we judge these schemes on three dimensions:

  • Getting started: The closer you get to native CSS, the better

  • Flexibility: The more programming you have, the more flexibility you have

  • Capabilities: How much native CSS can be solved

Will find that each scheme has its own advantages and disadvantages.

Such as:

  • Write CSS with JS, which has high flexibility, but increases the difficulty of getting started

  • Less (CSS preprocessor) can be regarded as the superset of CSS. It is easy to get started and has certain programming ability, but it also has the problems of CSS itself

The common practice in the industry is to use both the BEM specification (to resolve name conflicts) and the CSS preprocessor.

Enter the Vue CSS solution

We use these three dimensions to analyze THE SFC (single-file Component) of Vue:

<template>
  <p>xxx</p>
</template>

<script>
  // ...
</script>

<style scoped>
  p {
    color: #0f0;
  }
</style>
Copy the code

  • Easy to get started: The styles are written inside the

  • Capabilities: Scoped provides modularity capabilities

  • Flexibility: You can use a variety of preprocessors and have some flexibility

It can be seen that Vue SFC adopts a CSS scheme with no obvious shortcomings in various aspects and local highlights (low difficulty in getting started).

With the release of Vue3.2, CSS properties in Vue SFC have gained the ability to update responsively, making them much more flexible.

Reactive CSS properties

For the following Vue SFC:

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'}}}</script>

<style>
.text {
  color: v-bind(color);
}
</style>
Copy the code

Text uses v-bind to bind the state to the color property. The effect is as follows:

To verify the responsive update capability, add a click event to the div:

  <div class="text" @click="color= color === 'red' ? 'green' : 'red'">hello</div>
Copy the code

Clicking on it toggles the color status between red and green. As you can see, the page style changes in sync:

The Demo address

You can bind state for any CSS property, not just color.

So how is this feature implemented?

Realize the principle of

Each state that is v-bind to a CSS property corresponds to a CSS variable that is assigned to the component’s outermost DOM as a style property.

In our example:

.text {
  color: v-bind(color);
}
Copy the code

Where v-bind(color) becomes the CSS variable:

And assign it to div as a style property:

Text is compiled using this CSS variable:

.text{// before compilation/* color: v-bind(color); * // / the compiledcolor: var(--469af010-color);
}
Copy the code

When the color changes, the value of the CSS variable changes:

Therefore, to use this feature you need the target browser to support CSS variables.

Vue3 gave up IE and that was a real deal.

conclusion

Vue officially calls this feature state-driven Dynamic CSS.

After this wave of operations, Vue SFC CSS flexibility has been greatly improved.

And, with v-bind as a starting point, there will be more custom CSS directives linked to responsive updates in the future.

While previous custom directives were runtime, future directives may be compile-time based on AST. Do you accept this change?