scoped css

official document

scoped CSS can be used directly in the running of the project. The method of using


 < style scoped> H1 {color: #f00;} < /style> the result of dividing the local style with the result is as follows: a unique attribute is added to the element to distinguish. 


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

two, according to the features of the CSS style priority, the scoped processing will cause the weight of each style:

, which is theoretically to modify the style, and requires a higher weight to cover the style.

so if you need to modify the style if you need to modify the third party plug-in containing scoped, you need global modification, and you need to pay attention to the weight problem. 0 is forced to use it again! Important.

three, if there are other components inside the component, will only add the data attribute of the current component to the outermost tag of the other components:

, so the general parent component, if added, will have a lower weight than the outer label in the subcomponent that has been set in its own style, and will not affect their sample. Type.

, however, can be influenced by the following methods:

four, which will make the tag selector render a lot more slowly. Below:

we can see that when the tag selector is used, scoped will reduce the performance seriously, but not using it.

css module

official document

css requires additional configuration to take effect, specifically to see the implementation of the document.

pays attention to

if you use style-loader, if you want the configuration to take effect, you need to change to the vue-style-loader described in the document. The difference between the two

can be found from the vue-style-loader

as follows:

 < template> <. 

 < p> Im gray< /p>.Gray_3FI3s6uz {color: gray;}

as this can be seen directly, replacing the class name directly, excluding the possibility that the user set the class name to affect the component style.

so that $ can be used as a variable and can be used in JS, as follows:

 < script> export default {created () {console.log / / / / / / / / / a identifier based on file names and class names}}} As you can see, module is more binding and $style when it is used. If you want to be more elegant, you can take a look at this vue-css-modules. 

uses the CSS module problem in keyframes

to use CSS modules to handle the key frame keyframes of animated animation, and the animation name must be written first.

animation: ani 1s; can be compiled normally, and animation: 1s ani; the compilation will not meet the expectations, so it is also important to develop a good writing order of CSS parameters.

summed up the

, CSS module is not a troublesome configuration in the early stage, and the effect is better than scoped CSS.

above is a small compilation of Vue compared to scoped CSS and CSS module, I hope to help you, if you have any questions please give me a message, the small editor will respond to you in time. Thank you for your support for the script home website.

you may be interested in:

This concludes the body part

This paper fixed link: | Script Home | +Copy Link

Article reprint please specify:Contrasting the difference between scoped CSS and CSS module in Vue | Script Home

You may also be interested in these articles!