526互联

关于vue清除默认样式&scoped

发布时间 2023-07-06 11:15:53作者: yxxcl

清除默认样式

在Vue中，可以使用以下方法来清除默认样式：

1. 使用CSS Reset：

CSS Reset是一种将所有HTML元素的默认样式重置为统一值的方法，以消除不同浏览器之间的样式差异。你可以在全局的样式表中使用CSS Reset来清除默认样式。以下是一些常见的CSS Reset库：

  • Normalize.css：Normalize.css是一个广泛使用的CSS Reset库，它在保留有用的默认样式的同时，修复了浏览器之间的一些不一致之处。

  • Reset.css：Reset.css是一个简化的CSS Reset库，它将大多数HTML元素的样式重置为零。

你可以通过在主项目的全局样式表中导入这些库来使用它们。例如，在main.js或App.vue文件中引入CSS Reset：

/* main.js 或 App.vue 中 */
import 'normalize.css'; // 或 import 'reset.css';

2. 使用重置样式表

在public文件夹创建reset.css，再导入重置样式表 重置样式表仅供参考，可根据需要自行修改

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

3. 创建全局index.css文件进行初始化并在main.js中导入

重置样式表仅供参考，可根据需要自行修改

main.js:import "../src/less/index.less";

@charset "UTF-8";
/*初始化*/
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  vertical-align: baseline;
}
​
html {
  width:100%;
  height: 100%;
}
​
body {
  width:100%;
  height: 100%;
  font-family: Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b\4f53, sans-serif;
}
​
/*清除列表的默认风格*/
ul, ol, dl {
  list-style: none;
}
​
/*表单相关的元素*/
fieldset, img, input, button, textarea{
  border: none;
  margin: 0;
  padding: 0;
  /*去除外边线*/
  outline: none;
}
/*超链接标签*/
a{
  color: #999;text-decoration: none;
}
a:hover{
  color: #f8b62b;
}
/*h家族*/
h1,h2,h3,h4,h5,h6{
  font-weight: normal;
  font-size: 100%;
}
/*浮动*/
.fl{
  float: left;
}
​
.fr{
  float: right;
}
/*清除浮动*/
.clearfix::before,
.clearfix::after{
  content: '';
  display: table;
  clear: both;
}
​
/*水平对齐方式*/
.tl{
  text-align: left;
}
​
.tr{
  text-align: right;
}
​
.tc{
  text-align: center;
}
​
/*页面通用颜色*/
.f60{
  color: #f8b62b;
}
​
/*清除语义化标签的默认样式*/
s, i{
  font-style: normal;
  text-decoration: none;
}

设置scoped

在Vue组件中，你可以将样式设置为scoped，这样样式将仅适用于该组件及其子组件，而不会影响其他组件。这样可以在组件内部清除默认样式，而不会影响到全局样式。

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>
​
<style scoped>
/* 在这里编写清除默认样式的样式 */
.my-component {
  margin: 0;
  padding: 0;
  /* 其他样式重置 */
}
</style>

使用CSS Modules：

如果你在Vue项目中使用了CSS Modules，那么样式将被局限在组件的作用域中，这样也可以避免全局样式的影响。CSS Modules允许你在组件中定义样式并将其绑定到组件中的元素。

<template>
  <div :class="$style.myComponent">
    <!-- 组件内容 -->
  </div>
</template>
​
<style module>
/* 在这里编写清除默认样式的样式 */
.myComponent {
  margin: 0;
  padding: 0;
  /* 其他样式重置 */
}
</style>

scoped

scoped 是 Vue 组件中的一个特殊属性，用于将样式作用域限定在组件内部，从而实现样式的局部作用和隔离。

当你在组件的 <style> 标签上添加 scoped 属性时，该样式将仅适用于当前组件内部的元素，不会对其他组件或全局样式产生影响。这样可以避免样式的冲突和污染，增加组件的可重用性和可维护性。

以下是一个示例：

<template>
  <div>
    <p>This paragraph will be affected by global styles.</p>
    <p class="scoped-paragraph">This paragraph will be styled locally.</p>
  </div>
</template>
​
<style scoped>
/* 该样式仅影响当前组件内部的 .scoped-paragraph 类 */
.scoped-paragraph {
  color: red;
  font-size: 16px;
  /* 其他样式 */
}
</style>

在上面的示例中，组件中的第一个 <p> 元素不受 scoped 样式的影响，而第二个 <p> 元素具有 .scoped-paragraph 类，并且样式仅在当前组件内部生效。

使用 scoped 样式时需要注意以下几点：

  1. 父组件无scoped属性，子组件带有scoped，父组件是无法操作子组件的样式的（原因在原理中可知），虽然我们可以在全局中通过该类标签的标签选择器设置样式，但会影响到其他组件

    父组件有scoped属性，子组件无，父组件也无法设置子组件样式，因为父组件的所有标签都会带有data-v-469af010唯一标志，但子组件不会带有这个唯一标志属性，与1同理，虽然我们可以在全局中通过该类标签的标签选择器设置样式，但会影响到其他组件

    父子组建都有，同理也无法设置样式，更改起来增加代码量

  2. scoped 样式是通过给每个选择器自动添加一个唯一的属性选择器来实现的。这意味着选择器的特殊性可能会改变，你可能需要使用更具体的选择器来覆盖全局样式。

  3. 由于 scoped 样式是通过运行时注入的，因此在浏览器的开发者工具中查看组件的样式时，可能会看到生成的唯一属性选择器。

总之，scoped 样式是 Vue 提供的一种实现组件样式局部化的机制，它可以确保组件样式的隔离和可维护性，使样式的影响范围局限在组件内部，不会对其他组件或全局样式产生冲突。

原理

  1. 给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性。

  2. 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器的哈希特征值（如[data-v-2311c06a]）来私有化样式。

scoped 穿透

基于上面3个原因，或者Vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。

  1. 使用两个style，一个用于私有样式，一个用于共有样式。

<!--共有样式-->
<style>
.content .box {
  width:5px;
}
</style>
<!--私有样式-->
<style scoped>
.content {
  height: 500px;
}
</style>

  1. 深度作用选择器

<style scoped>
.content {
  height: 500px;
}
.content >>> .box {
  width:5px;
}
/* .content /deep/ .box {
  width:5px;
} */
/* .content ::v-deep .box{
  width:5px;
} */
</style>

上述代码会被编译成

<style type="text/css">
.content[data-v-7ba5bd90] {
  height: 500px;
}
.content[data-v-7ba5bd90] .box {
  width:5px;
}
/* .content /deep/ .box {
  width:5px;
} */
/* .content ::v-deep .box{
  width:5px;
} */
</style>

scoped的缺点

  1. 代码复杂性增加：使用 Scoped 可能导致代码的复杂性增加。当变量或资源的作用域受到限制时，可能需要引入额外的嵌套作用域或范围。这可能增加代码的复杂性，使得代码更难理解和调试。

  2. 范围的控制限制：Scoped 通常依赖于特定的编程语言功能或库来实现。这可能导致限制，例如在特定的语言或环境中无法使用 Scoped。如果要在不同的环境或语言中迁移代码，可能需要重写 Scoped 部分。

  3. 资源管理的开销：尽管 Scoped 可以自动管理资源的生命周期，但它可能会引入一些额外的开销。例如，在变量超出范围时，Scoped 可能需要执行特定的清理操作或释放资源。这些额外的操作可能会导致性能损失或增加开销。

  4. 不适合所有情况：Scoped 并不适用于所有情况。有些场景可能需要更细粒度的控制，而 Scoped 只提供了一种简化的资源管理方式。在某些情况下，手动管理资源的生命周期可能更合适，以便更好地控制资源的行为和性能。

需要注意的是，这些缺点并不适用于所有使用 Scoped 的情况，而是一般性的观点。Scoped 的实际效果和优劣取决于具体的应用场景和编程语言的实现。在使用 Scoped 时，需要权衡其优点和缺点，并根据具体情况进行决策。

作者：adjafeja 链接：https://juejin.cn/post/7252499433638789175 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。