CSS代码使用优化

在csdn学习了很久，解决了很多基础性的问题，但有些细节，可能前辈们觉得太过基础并未总结。今天结合上班的第一周工作以及参考前辈代码将自己的css代码习惯进行优化总结。

vue页面css代码

初始：使用scss嵌套写法并写在.vue页面style里

<template>
  <div class="box">
    <div class="title">你好</div>
    <div class="content">
      祝大家身体哈皮
      <div class="tip">一路向钱</div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
  .box {
    width: 100%;
    .title {
      font-size: 20px;
      font-weight: 700;
    }
    .content {
      font-size: 12px;
      .tip {
        font-size: 8px;
      }
    }
  }
</style>

优化：

1、css命名更加清晰 使用父-子的写法让代码结构更加明了

    <div class="content">
      祝大家身体哈皮
      <div class="content-tip">一路向钱</div>
    </div>

2、使用连体符&代替元素本身，是代码显示更为简洁

    .content {
      font-size: 12px;
      &-tip {
        font-size: 8px;
      }
    }

3、scss样式较为简洁（最好不超过三四十行）可以写在.vue页面的style里面，如果过长则在文件夹中另打开一个scss文件编写代码，并在.vue页面引入。

 

 4、公共样式提取并引入项目中

 如果样式种类较多，提取出来的样式也可在分，统一引入到index.scss文件，在由main.js引入index.scss，防止main.js引入过多使其杂乱