What are the differences between using scoped css and css module in Vue?

This time I will bring you the differences between using scoped css and css in Vue module, what are the precautions for using scoped css and css module in Vue, the following is the actual combat Let’s take a look at the case.

scoped css

Official Document

scoped css can be used directly in a vue project that can run.

Usage:

<style scoped>
h1 {
 color: #f00;
}
</style>

The compilation result of using scoped to divide local styles is as follows:

h1[data-v-4c3b6c1c] {
 color: #f00;
}

That is, a unique attribute is added to the element for differentiation.

Disadvantages

1. If the user defines the same class name elsewhere, it may still affect the style of the component.

2. According to the characteristics of css style

priority, scoped processing will cause the weight of each style to increase:

In theory, we need to modify this Style requires higher weight to cover this style.

So when

referencing containing scoped third-party plug-ins, if you need to modify the style, you need to modify it globally, and pay attention to the weight issue. 0.0 has no choice but to use !important.

3. If the component contains other components, only the data attribute of the current component will be added to the outermost tag of other components:

So generally if the parent component is scoped, it will The inner tags, except the outermost tag, have a lower weight than the inner tags in the subcomponents that have set their own styles, and will not affect their styles.

However, it can also be affected by the following methods:

4. Scoped will cause the tag selectorrendering to change. Many times slower

The official gave some precautions as follows:

We can see that scoped will seriously reduce performance when using tag selectors. Using class or id will not.

css module

Official document

css module needs to add css-loader configuration to take effect, please refer to the document for details accomplish.

Note

If you are using style-loader, if you want the configuration to take effect, you need to change to vue-style- as described in the document. loader.

The difference between the two can be found here vue-style-loader

Used as follows:

<template>
 <p :class="$style.gray">
 Im gray
 </p>
</template>
<style module>
.gray {
 color: gray;
}
</style>

The result of using module is compiled as follows:

<p class="gray_3FI3s6uz">Im gray</p>
.gray_3FI3s6uz {
 color: gray;
}

By It can be seen that css module directly replaces the class name, eliminating the possibility of the user setting the class name to affect the component style.

In this way, $style.red can be used as a variable and can be used in js, as follows:

<script>
export default {
 created () {
 console.log(this.$style.gray)
 // -> "gray_3FI3s6uz"
 // 一个基于文件名和类名生成的标识符
 }
}
</script>

We can see that module has more binding and $style when using it , if you want to be more elegant, you can take a look at this vue-css-modules.

Problems using css module in keyframes

Using CSS modules to process the keyframes of animation

animation, the animation name must be written first. animation: ani 1s; can compile normally, but animation: 1s ani; will not compile as expected, so it is also important to develop a good writing order of css parameters.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to build a webpack react development environment

Detailed explanation of Node.js Buffer usage

How to build a React family bucket environment

The above is the detailed content of What are the differences between using scoped css and css module in Vue?. For more information, please follow other related articles on the PHP Chinese website!