Detailed answer to the difference between scoped css and css module in css scope

This article brings you relevant knowledge about the difference between scoped css and css module. Both scoped css and css module are used to control the local scope of css and prevent duplication of class names. So what is the difference between the two? Well, I hope it helps everyone.

Preface

scoped css and css module are both designed to control the local scope of css and prevent problems such as duplication of class names. So what's the difference between the two?

1. css module

1.1. Explanation
Regenerates class names for all class names, effectively avoiding the problems of css weight and class name duplication. css module directly replaces the class name, eliminating the possibility of the user setting the class name to affect the component style, so there is no need to rack your brains for naming.
1.2 Implementation Principle
By adding a hash string suffix to the style name, the compiled style in a specific scope context can be globally unique.
1.3 Usage

• In the webpack.base.conf.js file, pass modules: true to css-loader to enable CSS Module. localIdentName is the naming rule for setting the generated style.

//webpack.base.conf.jsmodule: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }

• Add the module attribute in the < style > tag

<style module>.red {
  color: red;}.bold {
  font-weight: bold;}</style>

• Use it through a dynamic class binding in the vue template

<template>
  <p :class="$style.red">
    This should be red  </p></template><template>
  <p>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold    </p>
  </p></template>

• Use in js

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

1.4 Usage effect

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

Result after compilation:

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

1.5 Notes

• When processing keyframes of animation animation, the animation name must be written first. For example, if animation: deni .5s, it will compile normally; if animation: .5s deni, it will compile abnormally.
• Remember to configure css-loader, otherwise it will not take effect.
• If you are using style-loader, you need to configure and change it to vue-style-loader for it to take effect.
• How do css modules solve the weight problem?
  Allows style rules to be encapsulated through renaming or namespace, reducing constraints on selectors, so that class names can be used comfortably without specific methods.
  When style rules are coupled to each component, the styles are also removed when the component is no longer used.

2. Scoped

2.1 Implementation Principle
Vue ensures uniqueness by adding unique and non-repeating tags to the DOM structure and css style. Achieve the purpose of style privatization and modularization. It is impossible to completely avoid the problem of css weight and class name duplication.
2.2 Usage method
Add the scoped attribute to the < style > tag
2.3 Usage effect

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

Compiled result:

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

2.4 Disadvantages

• If the user defines the same class name elsewhere, it may still affect the style of the component.
• According to the characteristics of CSS style priority, scoped processing will increase the weight of each style. Referring to components that use scoped
  As a sub-component, it becomes difficult to modify the style of the sub-component. You may have no choice but to use it! important
• Scoped will slow down tag selector rendering many times. When using tag selectors, scoped will seriously reduce performance, but using class or id will not

3. Summary

The actual effect of css module is better than that of scoped, and the configuration of css module is not difficult, so I recommend css module more.

(Learning video sharing: css video tutorial)

The above is the detailed content of Detailed answer to the difference between scoped css and css module in css scope. For more information, please follow other related articles on the PHP Chinese website!