Elegant use of CSS Modules in Vue

This time I will bring you how to use CSS Modules elegantly in Vue. What are the precautions for using CSS Modules elegantly in Vue. The following is a practical case. Get up and take a look.

CSS Modules gives each local class a globally unique class name so that component styles will not affect each other. For example:

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

It will be converted to something like this:

/* button.css */
.buttonbutton--d8fj3 {
 font-size: 16px;
}
.buttonmini--f90jc {
 font-size: 12px;
}

When importing a CSS module file, it will provide us with the mapping object of local class name to global class name. Like this:

import styles from './button.css'
// styles = {
// button: 'buttonbutton--d8fj3',
// mini: 'buttonmini--f90jc'
// }
element.innerHTML = '<button class="&#39; + styles.button + &#39; &#39; + styles.mini + &#39;" />'

vue-css-modules: Simplified class name mapping

The following is a that uses CSS Modules Button GroupParts:

<template>
 <button :class="{
 &#39;global-button-class-name&#39;: true,
 [styles.button]: true,
 [styles.mini]: mini
 }">点我</button>
</template>
<script>
 import styles from './button.css'
 export default {
 props: { mini: Boolean },
 data: () => ({ styles })
 }
</script>

Indeed, CSS Modules is a good choice for Vue components. But there are also the following shortcomings:

• You must pass in styles in data

• You must use styles.localClassName to import the global class name

• If there are other global class names, you must put them together

• If you want to combine them with the component's properties Value binding, even if the local class name and property name are the same, they must be explicitly specified

For the button component above, use vue- After css-modules:

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

Now:

• You don’t have to pass styles in data, but you have to pass styles in mixins:full_moon_with_face:

• You can say goodbye to styles.localClassName

• Put the local class name in the styleName attribute and the global class name in the class attribute, which is much more organized

• The local class name binds the property of the component with the same name, just add: modifier in front of it

Modifier

@button

<button styleName="@button">按钮</button>

This is equivalent to:

<button styleName="button" data-component-button="true">按钮</button>

This allows you to reset the style of the component externally:

.form [data-component-button] {
 font-size: 20px;
}

$type

<button styleName="$type">按钮</button>

This is the same as:

<button :styleName="type">按钮</button>

:mini

<button styleName=":mini">按钮</button>

This is the same as:

<button :styleName="mini ? &#39;mini&#39; : &#39;&#39;">按钮</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按钮</button>

This is the same as:

<button :styleName="isDisabled ? &#39;disabled&#39; : &#39;&#39;">按钮</button>

Usage method

Use in Vue template

Introduce CSS module outside the template

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

Use inside the template CSS module

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 export default {
 mixins: [CSSModules()],
 props: { mini: Boolean }
 }
</script>
<style module>
 .button {
 font-size: 16px;
 }
 .mini {
 font-size: 12px;
 }
</style>

Used in Vue JSX

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render() {
 return (
  <button styleName="@button :mini">点我</button>
 )
 }
}

Used in Vue rendering function

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render(h) {
 return h('button', {
  styleName: '@button :mini'
 }, '点我')
 }
}

I believe you have mastered the method after reading the case in this article, please pay attention for more exciting things Other related articles on php Chinese website!

Recommended reading:

How to use vue-cli to expand multi-module packaging

How to use Vue packaging to optimize code spliting

The above is the detailed content of Elegant use of CSS Modules in Vue. For more information, please follow other related articles on the PHP Chinese website!