Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article, "what are the differences between css's scoped css and css module?", so the editor summarizes the following, detailed contents, clear steps, and a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what are the differences between css's scoped css and css module?"

1. Css module

1.1. explain

Regenerate class names for all class names, effectively avoiding the problem of css weights and duplicate class names. Css module replaces the class name directly, eliminating the possibility that the user setting the class name affects the style of the component, so that you don't have to rack your brains for naming.

1.2 implementation principle

The compiled style in a specific scope context is globally unique by suffixing the style name with a hash string.

1.3 method of use

In the webpack.base.conf.js file, pass modules: true to css-loader to turn on CSS Module. LocalIdentName is the naming convention for setting up generation styles.

/ / webpack.base.conf.jsmodule: {rules: [/ /... Other rules are omitted {test: /\ .css $/, use: ['vue-style-loader', {loader:' css-loader', options: {/ / enable CSS Modules modules: true / / Custom generated class name localIdentName:'[local] _ [hash:base64:8]'}]}]}

In

Tag add module attribute

.red {color: red;}. Bold {font-weight: bold;}

Use it through a dynamic class binding in the vue template

This should be red

Am I red?

Red and bold

Use in js

Export default {created () {console.log (this.$style.red) / /-> "red_1VyoJ-uZ" / / an identifier generated based on the file name and class name}}

1.4 use effect

Im gray

.gray {color: gray;}

Compiled result:

/ / compilation result Im gray

.gray _ 3FI3s6uz {color: gray;}

1.5 pay attention.

When dealing with the Keyframe keyframes of the animation animation, the animation name must be written first. For example, animation: deni .5s, compiles normally; animation: .5s deni, compilation exception

Remember to configure css-loader, otherwise it will not take effect.

If you are using style-loader, you need to change the configuration to vue-style-loader to take effect.

How does css modules solve the weight problem?

Allows you to encapsulate style rules through renaming or namespaces, reducing constraints on selectors so that class names can be used comfortably without a specific method.

When the style rule is coupled to each component, the style is also removed when the component is no longer used.

II. Scoped

2.1 implementation principle

Vue ensures uniqueness and achieves the goal of privatization and modularization of the style by adding unique non-repetitive tags to the DOM structure and the css style. The problem of duplicate css weights and class names cannot be completely avoided.

2.2 method of use

In

Tag add scoped attribute

2.3 use effect

H2 {color: # f00;}

Compiled result:

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

2.4 shortcomings

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

According to the priority nature of css styles, this processing of scoped increases the weight of each style, referencing components that use scoped

As a subcomponent, it becomes difficult to modify the style of a subcomponent and may have to use it as a last resort! Important

Scoped slows down the rendering of the tag selector many times, and scoped severely degrades performance when using the tag selector, but not with class or id

The above is about the content of this article on "what are the differences between scoped css and css module of css". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.