Home > Web Front-end > JS Tutorial > body text

CSS Modules elegant mode usage

php中世界最好的语言
Release: 2018-04-28 16:41:24
Original
2074 people have browsed it

This time I will bring you the use of CSS Modules elegant mode. What are the precautions for using the elegant mode of CSS Modules? The following is a practical case, let’s 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;
}
Copy after login

It will be converted to something like this:

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

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;" />'
Copy after login

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>
Copy after login

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 bind to the property value of the component, even if it is local The class name is the same as the attribute name, and must also be specified explicitly

For the button component above, after using vue-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>
Copy after login
Copy after login

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 a lot neater

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

Modifier

@button

<button styleName="@button">按钮</button>
Copy after login

This is equivalent to:

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

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

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

$type

<button styleName="$type">按钮</button>
Copy after login

This is the same as:

<button :styleName="type">按钮</button>
Copy after login

:mini

<button styleName=":mini">按钮</button>
Copy after login

This is the same as:

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

This is the same as:

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

Usage method

Use in the Vue template

Introduce the 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>
Copy after login
Copy after login

Use the CSS module inside the template

<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>
Copy after login

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>
 )
 }
}
Copy after login

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'
 }, '点我')
 }
}
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website !

Recommended reading:

How to write components in vue

##node token implementation verification

The above is the detailed content of CSS Modules elegant mode usage. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template