What?

Scoped representation of CSS.

CSS Modules


     
    
      
  1. Is a CSS file in which all class names and animation names default to local scope.
    2. 
      
  2. Use JS to compile native CSS files to make them modular, the file needs to be imported.
    3. 
     
Copy the code

Scoped


     
    
      
  1. On the style tag in the Vue file, there is a special attribute: scoped.
    2. 
      
  2. This style applies only to the current component element so that styles between components do not pollute each other.
    3. 
     
Copy the code

How?

Css modules

Realize the principle of

Make compiled styles in a particular scoped context globally unique by suffixing style names with hash strings.

Specific effect demo


     
    
      
  1. // webpack.config.js
    2. 
      
  2. {
    3. 
      
  3.   test: /\.css$/,
    4. 
      
  4. loader: 'style! css-loader? modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
    5. 
      
  5. }
    6. 
     
Copy the code

     
    
      
  1. Pre-compile - Vue environment
    2. 
      
  2. <template>
    3. 
      
  3.   <div :class="$style.green">demo demo</div>
    4. 
      
  4. </template>
    5. 
      
    6. 
      
  6. <style module>
    7. 
      
  7. .green {
    8. 
      
  8.  color: green;
    9. 
      
  9. }
    10. 
      
  10. </style>
    11. 
      
    12. 
      
  12. After compiling - vue environment
    13. 
      
  13. <div class="green_3UI7s9iz">demo demo</div>
    14. 
      
    15. 
      
  15. .green_3UI7s9iz {
    16. 
      
  16.  color: green;
    17. 
      
  17. }
    18. 
     
Copy the code

Thus it can be seen

  1. 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. The advantage is that you don’t have to worry about naming conventions.

  2. $style.green is a variable that can be referenced in js as this.$style.green.

  3. Modules is enabled, and localIdentName is the naming convention that sets the generated style.

Application scenarios

Applies only to one component, not the other components.

⚠ ️ pay attention to the point

  • Before processing the keyframes of the animation, the animation name must be written:

  • For example, animation: deni.5s compiles normally. Animation:.5s deni, the compilation is abnormal

  • CSS modules takes effect:

  • The CSS-Loader configuration is required to 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.

Scoped

Realize the principle of

Vue achieves the goal of privatizing style modularity by placing unique tags on DOM structures and CSS styles to ensure uniqueness.

Specific effect demo


     
    
      
  1. // pre-compile demo.vue
    2. 
      
  2. <template>
    3. 
      
  3. <div class="demo-c">hello world! </div>
    4. 
      
  4. </template>
    5. 
      
    6. 
      
  6. <style lang="less" scoped>
    7. 
      
  7.   .demo-c {
    8. 
      
  8.     width: 100%;
    9. 
      
  9.     height: 100px;
    10. 
      
  10.     background-color: green;
    11. 
      
  11.     color: #fff;
    12. 
      
  12.   }
    13. 
      
  13. </style>
    14. 
     
Copy the code

     
    
      
  1. // after compiling -dom
    2. 
      
  2. <div data-v-48baf84c="" class="demo-c">hello world! </div>
    3. 
      
  3. // After compiling -css
    4. 
      
  4. .demo-c[data-v-48baf84c] {
    5. 
      
  5.   width: 100%;
    6. 
      
  6. Height: 1.333333 rem;
    7. 
      
  7.   background-color: green;
    8. 
      
  8.   color: #fff;
    9. 
      
  9. }
    10. 
     
Copy the code

Application scenarios

Scoped CSS can be used directly in a running VUE project and the style is only valid for that component and not contaminated by other components.

⚠ ️ pay attention to the point

“Weighted” means that if we want to change the style, we need a higher weight to override the style.

  • Due to the nature of CSS style priorities, scoped processing causes each style to be weighted more heavily.

  • If the component contains child components, only the data attribute of the current component is added to the outermost tag of the child component:

  • The parent component with scoped has a lower weight than the inner tag (except for the outermost tag) of the child component that has styled itself, so it does not affect their styling.

  • Scoped makes the label selector render more slowly.

  • If the user defines the same class name again, it may affect the style of the component.

  • Styles with the scoped attribute are only applied to the current element and its children. Inline styles still take precedence over scoped, so it’s best to avoid Inline styles.

Why?

purpose

  • CSS modular

  • CSS privatization: not contaminated

  • CSS reusability

  • Solve global scope problems in CSS

conclusion

For the same purpose, comparing their advantages and disadvantages, CSS modules are easy to configure and the overall effect is better than Scoped CSS. I recommend using CSS modules.

The resources

  • https://github.com/css-modules/css-modules

  • https://cn.vuejs.org/v2/guide/comparison.html#%E7%BB%84%E4%BB%B6%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%86%85%E7%9A%84-CSS

  • https://vue-loader.vuejs.org/guide/css-modules.html#usage

  • https://github.com/css-modules/webpack-demo

  • https://webdesign.tutsplus.com/tutorials/solve-your-specificity-headaches-with-css-modules–cms-28973