preface

Scoped CSS and CSS Module are both designed to control the local scope of CSS and prevent class names from repeating. So what’s the difference?

A, CSS module

1.1. Regenerating class names for all class names effectively avoids the CSS weight and class name duplication problem. The CSS Module replaces the class name directly, eliminating the possibility that the user can change the class name to affect the style of the component, so that you don’t have to struggle with naming. 1.2 Implementation Principles By adding a hash string suffix to the style name, the compiled style in a specific scoped context is globally unique. 1.3 Usage

  • In the webpack.base.conf.js file, pass Modules: true to csS-loader to start the CSS Module.localIdentNameIs to set the naming rules for the generated styles.
//webpack.base.conf.js
module: {
    rules: [
      / /... Other rule elision
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader'.options: {
              // Enable CSS Modules
              modules: true.// Customize the generated class name
              localIdentName: '[local]_[hash:base64:8]'}}]}Copy the code
  • Add the Module attribute to the < style > tag
<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>
Copy the code
  • It is used in the VUE template through a dynamic class binding
<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

<template>
  <div>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold
    </p>
  </div>
</template>
Copy the code
  • Use in js
<script>
export default {
  created () {
    console.log(this.$style.red)
    // -> "red_1VyoJ-uZ"
    // An identifier generated based on the filename and class name
  }
}
</script>
Copy the code

1.4 Effect

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

Result after compilation:

// Compile the result
<p class="gray_3FI3s6uz">Im gray</p>
.gray_3FI3s6uz {
 color: gray;
}
Copy the code

1.5 pay attention to the point

  • Before processing the keyframes of the animation, the animation name must be written first. For example, animation: deni.5s compiles normally. Animation:.5s deni, the compilation is abnormal
  • Remember to configure CSS-loader; otherwise, it will not take effect.
  • If style-loader is used, the ue-style-loader configuration takes effect.
  • How does CSS Modules solve the weight problem?

Encapsulate style rules by renaming or namespaces, reducing constraints on selectors and making it comfortable to use class names without requiring specific methods. When style rules are coupled to each component, styles are also removed when the component is no longer in use.

Second, the Scoped

2.1 Implementation Principle VUE adds unique marks on DOM structure and CSS style to ensure uniqueness and achieve the purpose of style privatization and modularization. Repeating CSS weights and class names cannot be completely avoided. Add the scoped attribute to the < style > tag

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

Result after compilation:

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

2.4 disadvantages

  • If the user defines the same class name elsewhere, it may still affect the style of the component.
  • Due to the nature of CSS style priorities, scoped results in heavier weights for each style, references to scoped components as child components, and modifications to child components become difficult and may be forced! important
  • Scoped will make the label selector render many times slower, and scoped will significantly degrade performance with the label selector, but not with class or ID

Third, summary

CSS Module is actually better than Scoped, and CSS Module configuration is not difficult, so I recommend CSS Module.