Can CSS be updated responsively like component state?

Hi everyone, this is Kasong.

I don’t know how you usually deal with CSS in the project?

We know that there are some problems with the CSS

• Prone to style conflicts when reused
• No scope, no modularity
• No programming skills

Many solutions have emerged in the community, such as:

• Naming convention (such as BEM specification)
• Module Specification (CSS Modules)
• CSS preprocessor (such as Less )
• CSS In JS
• CSS frame ( Tailwind CSS )

......

If we judge these plans in the following three dimensions:

• CSS started: the closer to the original 06114ce077beb7, the better to get started
• Flexibility: the stronger the programming ability, the more flexible
• Ability: How many native CSS problems can be solved

You will find that each program has its own advantages and shortcomings.

for example:

• CSS In JS program uses JS write CSS , which has extremely high flexibility, but increases the difficulty of getting started
• Less ( CSS preprocessor) can be regarded as a CSS . It is difficult to get started and has certain programming ability, but it also has problems with CSS

The common practice in the industry is to use the BEM specification (to solve the naming conflict problem) + CSS preprocessor at the same time.

The aggressive Vue CSS solution

We next analyzed using three dimensions Vue of SFC (Single-File-the Component, single-file assemblies):

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

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

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

• Difficult to get started: styles <style> the tag writing, and the native CSS indistinguishable, easy to use, intuitive
• Capability: scoped logo provides modular capability
• Flexibility: Various preprocessors can be used with a certain degree of flexibility

It can be seen that Vue SFC that has no obvious shortcomings in all aspects and is prominent in some parts (lower difficulty in CSS started).

With Vue 3.2 release, Vue SFC in CSS property acquired responsive renewal , so flexibility is greatly enhanced.

Responsive 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>

<script> color = 'red' is defined in the tag

.text uses v-bind as the color attribute to bind this state. The effect is as follows:

In order to verify the responsive update capability, add a click event div

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

Clicking will color status of green between red and 06114ce077c3a0. As you can see, the page style will also change synchronously:

Demo address

Not only is color , you can bind state CSS

So how is this feature implemented?

Realization principle

Each use v-bind bound to CSS attribute state corresponds to a CSS variable, the CSS variables as style assign outermost component attribute DOM .

In our example:

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

Where v-bind(color) will become CSS variable:

And assign it to div as the style attribute:

.text will use the CSS variable after compilation:

.text {
  // 编译前
  /* color: v-bind(color); */
  // 编译后
  color: var(--469af010-color);
}

When the color changes, the value of the CSS

Therefore, to use this feature, the target browser needs to support the CSS variable.

Vue3 give up IE This is what it says.

Summarize

Vue officially calls this feature State-Driven Dynamic CSS .

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

And with v-bind the beginning, I believe the future there will be more and responsive update linked custom CSS command .

The previous custom instructions are all run-time, and the following instructions may be based on AST at compile time. Do you accept this change?