将Figma CSS转换为Vue.js组件-此处的最佳做法是什么？

如何解决将Figma CSS转换为Vue.js组件-此处的最佳做法是什么？

我使用它提供的layout元素的CSS大致设计了我的webapp布局figma。我正在运行Vue.js 2 SPA，现在想第一手设计将html / css转换为Vue.js组件。我做到了尽可能简单地了解CSS等所有内容。

使用BEM CSS约定（这有助于我保持概览），将所有figma的元素CSS放入了Vue组件的CSS类中。然后，我为每个（BEM）块创建了多个div。

一些视觉和内容也要随之而来

Example.vue

<template>
  <v-container fluid>
    <div class="storage__header"></div>
    <div class="storage__header-text">Storage</div>
    <div class="storage__table-body"></div>
    <div class="storage__table-header"></div>
    <div class="storage__table-header-type">Type</div>
    <div class="storage__table-header-amount">Amount</div>
  </v-container>
</template>

<script>

export default {
  name: 'SettlementStorage',}
</script>
<style>
.storage__header-text {
  position: absolute;
  width: 166px;
  height: 35.04px;
  left: 3px;
  top: 258px;

  font-family: Aref Ruqaa,monospace;
  font-style: normal;
  font-weight: normal;
  font-size: 35px;
  line-height: 55px;
  display: flex;
  align-items: center;
  text-align: center;

  color: #000000;
}
.storage__header {: width:;
  position: absolute;
  width: 359px;
  height: 42px;
  left: -7px;
  top: 258px;
  background: #8F7F59;
  border-radius: 0px 200px 15px 0px;
}
.storage__table-header-amount {
  position: absolute;
  width: 100.42px;
  height: 27.33px;
  left: 235.65px;
  top: 309.91px;

  font-family: Aref Ruqaa,monospace;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 23px;
  text-align: center;

  color: #000000;
}
.storage__table-header-type {
  position: absolute;
  width: 78.55px;
  height: 24.53px;
  left: 10.94px;
  top: 309.91px;

  font-family: Aref Ruqaa,monospace;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 23px;
  text-align: center;

  color: #000000;
}
.storage__table-header {
  position: absolute;
  width: 350px;
  height: 42.74px;
  left: -2px;
  top: 305px;
  background: linear-gradient(180deg,rgba(48,41,25,0.25) 60.66%,rgba(55,66,63,0) 100%);
}
.storage__table-body {
  position: absolute;
  width: 360px;
  height: 341.96px;
  left: -7px;
  top: 300.04px;

  background: #C2B391;
  border: 5px solid #37423F;
  Box-sizing: border-Box;
  border-radius: 0px 0px 20px 0px;
}
</style>

将其作为结果

所以请不要误解我的意思。我非常高兴，一切仍然看起来像是在figma中设计的。但是，作为后端工程师，我感到有些奇怪。我非常确定我在这里做了一个非常幼稚的方法-仅使用div元素来应用CSS样式。

这是这样做的方式吗？ 还是我现在应该开始将所有这些重构为适当的样式那些元素。我非常迷茫，我真的不知道我该问些什么，或者我应该向谷歌寻求最好的做法。