scoped与module区别:
- scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover
- CSS modules则做的更彻底,它不是添加属性,而是直接改变类名;大大降低了冲突的可能性,只要不是用户直接给标签元素设置样式,基本上不会影响组件的显示
scoped写法:
<style scoped>
.red {color: red;}
</style>
当前模板直接使用就好!!!
关于动态类名也含有数组、对象、对象加数组、三元等写法.
Css modules 写法:
在style标签中添加module属性,表示打开CSS-loader的模块模式
<style module>
.red {color: red;}
</style>
在模板中使用动态类绑定:class,并在类名前面加上'$style.'
<template>
<p :class="$style.red">
This should be red
</p>
</template>
如果类名包含中划线,则使用中括号语法
<h4 :class="$style['header-tit']">类别推荐</h4>
也可以使用数组或对象语法
<p :class="{ [$style.red]: isRed }"> Am I red? </p> <p :class="[$style.red, $style.bold]"> Red and bold </p>
更复杂的对象语法
<ul
:class="{
[$style.panelBox]:true,
[$style.transitionByPanelBox]:needTransition
}"
更复杂的数组语法
<li
:class="[
$style['aside-item'],
{[$style['aside-item_active']]:(i === index)}
]"
模块化解释:
CSS Modules既不是官方标准,也不是浏览器的特性,而是在构建步骤中对CSS类名选择器限定作用域的一种方式(通过hash实现类似于命名空间的方法)。类名是动态生成的,唯一的,并准确对应到源文件中的各个类的样式
实际上,CSS Modules只是CSS模块化的一种方式。为什么我们需要CSS模块化呢?
CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。于是,亟待解决的就是样式冲突(污染)的问题。一般地,为了解决冲突,会把class命名写长一点,降低冲突几率;加上父元素的选择器,来限制范围等
CSS模块化就是来解决这个问题的,一般地,分为三类
1、命名约定类
该类CSS模块化方案主要用来规范CSS命名,最常见的是BEM,当然还有OOCSS等,在构建工具出现之前,大多数都是在CSS命名上做文章
2、CSS in JS
彻底抛弃CSS,用javascript来写CSS规则,常见的有styled-components
3、使用JS来管理样式
使用JS编译原生的CSS文件,使其具备模块化的能力,最常见的就是CSS Modules
随着构建工具的兴起,越来越多的人开始使用后两者方案,书写CSS时,不用再特意地关心样式冲突问题。只需要使用约定的格式编写代码即可