Vue3 learning in-depth analysis of CSS Modules and Scope

Css Modules is to add the label class name into a unique class name, for example, .class is converted into .class_abc_123, similar to symbol, unique key name

Css Scope achieves scope isolation by adding a custom attribute to an element and adding a unique number to this attribute.

Principle

##CSS Modules

CSS ModulesThe principle of implementing CSS modularization is based on what we defined in the config file

Class name naming rules generate a unique name for the class to achieve scope isolation. [Related recommendations: vuejs video tutorial, web front-end development]

Before conversion

• <style module>
    .title {
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: 700;
      color: #13161b;
    }
    .name {
      display: flex;
      align-items: center;
      &-img {
        width: 24px;
        height: 24px;
        border-radius: 4px;
      }
      &-text {
        font-size: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        color: #13161b;
      }
    }
  </style>

     cell: (h, { col, row }) => {
        // console.log(style);
        return (
          <span class={style.name}>
            <img src={testImage} class={style[&#39;name-img&#39;]} />
            <span class={style[&#39;name-text&#39;]}>{row.name}</span>
          </span>
        );
      },

After conversion

The tag.name-img is converted into _name_img_6hlfj_11 etc.

Scoped CSS

Vue Loader uses the CSS post-processor PostCSS by default to implement Scoped CSS. The principle is to add a custom attribute to the element hit by the selector in the style declared scoped, and then use the attribute selector to achieve the effect of scope isolation style.

Before conversion

• <template>
    <div class="example">hi</div>
  </template>
  <style module>
  .example {
    color: red;
  }
  </style>

After conversion

• <!-- 用自定义属性把类名封装起来了 -->
  <style>
  .example[data-v-f3f3eg9] {
    color: red;
  }
  </style>
  <template>
    <div class="example" data-v-f3f3eg9>hi</div>
  </template>

Apply

CSS Modules

About application, here we only introduce the usage issues in the Vue3 version

In Vue3, CSS Modules, in

c9ccee2e6ea535a969eb3f532ad9fe89 Add the module attribute, that is, a6167d77ee734aaef6dcd2aa69de7b33.
a6167d77ee734aaef6dcd2aa69de7b33 The code block will be compiled into CSS Modules and the generated CSS class will be exposed to the component as the key of the $style object, which can be used directly in the template $style. For named CSS Modules such as 8784e2fd63a27a4a8fec0995a8e86d19, the compiled CSS class is exposed to the component as the key of the content object, that is, module Whatever the attribute value is, the object will be exposed.

useCssModule module name uses

<script setup>
import { useCssModule } from &#39;vue&#39;

// 不传递参数，获取<style module>代码块编译后的css类对象
const style = useCssModule()
console.log(style.success)  // 获取到的是success类名经过 hash 计算后的类名
    
// 传递参数content，获取<style module="content">代码块编译后的css类对象
const contentStyle = useCssModule(&#39;content&#39;)
</script>

<template>
  <div>普通style red</div>

  <div :class="$style.success">默认CssModule pink</div>
  <div :class="style.success">默认CssModule pink</div>

  <div :class="contentStyle.success">具名CssModule blue</div>
  <div :class="content.success">具名CssModule blue</div>
</template>

<!-- 普通style -->
<style>
.success {
  color: red;
}
</style>

<!-- 无值的css module -->
<style module>
.success {
  color: pink;
}
</style>

<!-- 具名的css module -->
<style module="content">
.success {
  color: blue;
}
</style>

Note that for CSS Modules with the same name, the later ones will overwrite the previous ones.

For module naming distinction, it is mainly used in JSX and TSX components

Apply within Jsx and Tsx components

For JSX and TSX components cannot use scoped style, so CSS Modules is a good choice:

For example, write the h function in the script and use the style variable directly

   cell: (h, { col, row }) => {
      // console.log(style);
      return (
        <span class={style.name}>
          <img src={testImage} class={style[&#39;name-img&#39;]} />
          <span class={style[&#39;name-text&#39;]}>{row.name}</span>
        </span>
      );
    },

For example, the render function

<script>
export default {
  props: {
    text: {
      type: String,
      default: &#39;&#39;
    }
  },
  render(h) {
    return <span class={this.$style.span1}>hello 222 - {this.text}</span>;
  }
};
</script>

<style module>
.span1 {
  color: blue;
  font-size: 40px;
}
</style>

:global selector

When using global in Scope or Module

:global() allows the selector declared in brackets to hit the global , that is, its class name will not be encapsulated by rules, so it is not restricted by scope.

In actual projects, when we want to modify the default style of the component library used, when using the CSS Modules solution, we can modify its default style through: global(),

But we need to Note that it is best to have a class encapsulation outside, otherwise it may affect the global style.

:deep depth action selector

The deep action selector allows the style of the parent component to penetrate into the child component. The principle is to use descendant selectors.

/* 转化前 */
<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

/* 转化后 */
.a[data-v-f3f3eg9] .b {
  /* ... */
}

In actual projects, when we want to modify the default style of the component library used, when using the Scoped CSS solution, we can modify its default style through the depth selector.

Several ways to write depth left and right selectors:

/deep/: Obsolete
• '>>>': When not using Sass pre-processing You can use
• ::v-deep when using the processor: Use

when using the Sass preprocessor. However, in Vue3, improvements have been made as follows:

• The depth selectors /deep and >>> are deprecated, use

  :deep(.child-class) instead::v-deep

• : The slotted() selector supports the use of :slotted(selector) to control the style in the slot

• : The global() selector when only When some rules need to take effect globally, it is allowed not to repeatedly declare a style tag with a global scope, but to use: global(selector) to declare it as a global style.

Summary

The difference between the deep action selector deep and the declared global style. The depth action selector is just to allow the parent component to control the child Component styles, while global styles are globally effective.

##Requires additional configuration in vue.config.jsVue Loader supports it by default, no additional configuration is requiredGenerate unique elements for elements based on configured class naming rules Class name to achieve scope isolationBy customizing the hash attribute for the element, and then using the attribute selector to select the element to achieve scope isolationIn the style tag Declare module and declare scoped in the style tag to support importing styles of other modules and support style combination/Use:global() to lift the scope isolation and make the style effective globally1. You can define global styles so that the styles are not restricted by the scope; 2. You can select through deep action The tool hits the sub-component to control the style of the sub-component

CSS Modules	Scoped CSS

(Learning video sharing:

vuejs introductory tutorial, Basic programming video )

The above is the detailed content of Vue3 learning in-depth analysis of CSS Modules and Scope. For more information, please follow other related articles on the PHP Chinese website!