Using css modules in vue instead of scroped

The previous words

css modules is a popular modular and combined CSS system. vue-loader provides integration with css modules as an alternative to scope CSS. This article will introduce css modules in detail

Introduced

When I first used Vue, I advocated and used a lot of scoped technology.

<style scoped>
 @media (min-width: 250px) {
  .list-container:hover {
   background: orange;
  }
 }
</style>

This optional scoped property will automatically add a unique property (such as data-v-21e5b78) to specify the scope for the CSS in the component. When compiling, .list-container:hover will be compiled to something like .list-container[data-v-21e5b78]:hover

However, it does not completely avoid conflict

<span data-v-0467f817 class="errShow">Username must not be empty</span>

The above code is an example. After using scoped, it adds a unique property 'data-v-0467f817' to the element. The CSS style is compiled as follows

.errShow[data-v-0467f817] {
  font-size: 12px;
  color: red;
}

However, if the user also defines an errShow class name, it will affect the display of all components defined as the errShow class name

CSS modules do more thoroughly, instead of adding attributes, it directly changes the class name

<span class="_3ylglHI_7ASkYw5BlOlYIv_0">Username must not be empty</span>

This greatly reduces the possibility of conflict. As long as the user does not directly set the style of the span tag, it will basically not affect the display of the component.

Modular

CSS Modules are neither an official standard nor a feature of the browser, but a way to scope the CSS class name selector in the build step (implementing a namespace-like approach through hash). Class names are dynamically generated, unique, and correspond exactly to the styles of each class in the source file.

In fact, CSS Modules are just one way to modularize CSS. Why do we need CSS modularity?

The rules of CSS are global, and the style rules of any component are valid for the entire page. Therefore, what needs to be resolved urgently is the problem of style conflict (pollution). Generally, in order to resolve conflicts, the class name will be written longer to reduce the chance of conflicts; the parent element selector is added to limit the range, etc.

CSS modularity is to solve this problem. Generally, it is divided into three categories

1. Naming convention class

This type of CSS modular solution is mainly used to standardize CSS naming. The most common one is BEM, and of course OOCSS, etc. Before the emergence of construction tools, most of them were writing articles on CSS naming.

2、CSS in JS

Abandon CSS completely and write CSS rules with javascript. Common ones include styled-components

3. Use JS to manage styles

Use JS to compile native CSS files to make them modular. The most common one is CSS Modules

With the rise of building tools, more and more people have begun to use the latter two solutions. When writing CSS, they no longer need to pay special attention to style conflicts. Just write the code in the agreed format

How to write

Let's introduce the writing method of CSS modules

Add module attribute to the style tag to indicate the module mode to open CSS-loader

<style module>
.red {color: red;}</style>

Use dynamic class bindings in templates: class and prefix the class name with '$style.'

<template>
 <p :class="$">
  This should be red
 </p>
</template>

If the class name contains a scribble, use the bracket syntax

<h4 :class="$style['header-tit']">Category recommendations</h4>

Array or object syntax can also be used

  <p :class="{ [$]: isRed }">
   Am I red?
  </p>
  <p :class="[$, $]">
   Red and bold
  </p>

More complex object syntax

  <ul 
　 :class="{
    [$]:true,
    [$]:needTransition
   }"

More complex array syntax

  <li
   :class="[
    $style['aside-item'],
    {[$style['aside-item_active']]:(i === index)}
   ]"

Configuration

The default configuration of css-loader for CSS modules is as follows

{
 modules: true,
 importLoaders: 1,
 localIdentName: '[hash:base64]'
}

You can use the cssModules option of vue-loader to customize the configuration for css-loader

module: {
 rules: [
  {
   test: '\.vue$',
   loader: 'vue-loader',
   options: {
    cssModules: {
     localIdentName: '[path][name]---[local]---[hash:base64:5]',
     camelCase: true
    }
   }
  }
 ]
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.