Use CSS modules instead of scroped in Vue

Previous words

CSS modules is a popular modular and integrated CSS system. Vue-loader provides integration with CSS modules as an alternative to the scope CSS. This article describes the CSS modules in detail

Introduced

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

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

This optional scoped property automatically adds a unique property (such as data-v-21e5b78) to the CSS within the component to specify the scope, compile. List-container:hover will be compiled into a similar. list-container[ Data-v-21e5b78]:hover

However, it does not completely avoid conflicts

class="errshow"> Username must not be null </span>

In the above code example, after using scoped, it adds a unique attribute ' data-v-0467f817 ' to the element, and the CSS style is compiled as follows

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

However, if the user also defines a errshow class name, it affects the display of all components defined as the Errshow class name

CSS modules is more thorough, it is not to add attributes, but directly change the class name

class="_3ylglhi_7askyw5blolyiv_0"> Username must not be null </span>

This greatly reduces the likelihood of a conflict, as long as it is not the user who directly sets the style for the span tag, it basically does not affect the display of the component

Modular

CSS modules is neither an official standard nor a browser feature, but rather a way to scope a CSS class name selector in a build step (a method similar to namespace is implemented by hashing). The class name is dynamically generated, unique, and exactly corresponds to the style of each class in the source file

In fact, CSS modules is just one way of CSS modularity. Why do we need CSS modularity?

CSS rules are global, and the style rules for any one component are valid for the entire page. So, the problem of style conflict (pollution) needs to be solved urgently. In general, in order to resolve the conflict, the class name will be written longer, reduce the probability of conflict, plus the parent element selector, to limit the scope, etc.

CSS modularity is to solve this problem, in general, divided into three categories

1. Naming convention Classes

This kind of CSS modularization scheme is mainly used to standardize the CSS naming, the most common is BEM, of course, oocss, and so on, before the building tools appear, most of them are in the CSS naming the fuss

2. CSS in JS

Completely discard CSS, use JavaScript to write CSS rules, common styled-components

3, use JS to manage the style

Using JS to compile the native CSS file, so that it has the ability to modular, the most common is the CSS Modules

With the rise of building tools, more and more people are beginning to use the latter two programs, when writing CSS, no longer deliberately concerned about style conflicts. You only need to write code in a convention format.

Writing

The following is a description of CSS modules

Add the module property to the Style tab, which indicates that the Css-loader mode is turned on

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

Use dynamic class binding in the template: Class and precede the class name with ' $style. '

<template>  <p:class="$style. Red"> This    should is red   </p></template>

If the class name contains an underscore, use the square bracket syntax

<H4:Class="$style [' header-tit ']"> Category Recommendations 
You can also use array or object syntax
    <p:Class="{[$style. Red]: isred}">      Am I red?    </p>    <p:class="[$style. Red, $style. Bold]">       Red and Bold    </p>
More complex object syntax
    
:Class="{        [$style. Panelbox]:true,        [$ Style.transitionbypanelbox]:needtransition      }"
More complex array syntax
    <Li      :class="[        $style ['aside-item' ],        {[$style ['aside-item_active']]:(i = = index)}      ] "
Configuration
Css-loader the default configuration for CSS modules is as follows
{  true,  1,  '[hash:base64]' }
You can use Vue-loader's cssmodules option to customize the configuration for Css-loader
module: {  rules: [    {      '\.vue$',      '  Vue-loader',      options: {        cssmodules: {          '[path][name]-- -[local]---[hash:base64:5]',          true        }      }  ] }
Use CSS modules instead of scroped in Vue