将 Figma CSS 转换为 Vue.js 组件 - 这里有哪些最佳实践？

Question

我使用 Figma 提供的布局元素的 CSS 粗略地设计了我的 web 应用程序布局 Figma。我正在运行 Vue.js 2 SPA，现在想要第一次将 html/css 设计转换为 Vue.js 组件。我做得很简单，因为我可以了解 CSS 等所有内容。

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

一些需要遵循的视觉效果和内容

示例.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 样式。

这是这样做的方法吗？ 或者我现在应该开始将所有这些重构为设计这些元素的正确方式。我非常迷失，真的不知道我应该要求什么，也不知道我应该在谷歌上搜索什么最佳实践。