I created a mockup in Figma and got the CSS code from it. Now I need to turn this into a working Vue.js component but I’m not sure if I’m doing it right.
I’m using BEM naming for my CSS classes and basically just copying the styles from Figma into my Vue component. Here’s what I have so far:
<template>
<div class="inventory">
<div class="inventory__title-bar"></div>
<div class="inventory__title-text">Inventory</div>
<div class="inventory__data-container"></div>
<div class="inventory__column-header"></div>
<div class="inventory__column-category">Category</div>
<div class="inventory__column-quantity">Quantity</div>
</div>
</template>
<script>
export default {
name: 'InventoryPanel'
}
</script>
<style>
.inventory__title-text {
position: absolute;
width: 180px;
height: 40px;
left: 5px;
top: 300px;
font-family: Arial, sans-serif;
font-size: 32px;
color: #333333;
display: flex;
align-items: center;
}
.inventory__title-bar {
position: absolute;
width: 380px;
height: 45px;
left: -5px;
top: 300px;
background: #A68B5B;
border-radius: 0px 150px 10px 0px;
}
.inventory__data-container {
position: absolute;
width: 375px;
height: 350px;
left: -5px;
top: 340px;
background: #D4C7A3;
border: 4px solid #2F3D39;
border-radius: 0px 0px 15px 0px;
}
</style>
This works and looks exactly like my Figma design. But I’m coming from backend development and this feels wrong somehow. Am I supposed to use so many div elements like this? What’s the proper way to structure this kind of layout in Vue?
Your approach is pretty common for beginners but you’re right to feel like something’s off. The main issue isn’t the div count but rather the heavy reliance on absolute positioning which makes components brittle and non-responsive. I’ve been through this exact transition from backend to frontend work and found that treating each logical section as a separate component helps tremendously. Instead of one massive inventory component, break it into smaller pieces like InventoryHeader, InventoryColumns, and InventoryData. This makes the code more maintainable and lets you use more flexible layout techniques like CSS Grid for the overall structure. Also consider using CSS custom properties for your colors and spacing values since you’ll likely need to maintain design consistency across multiple components. The BEM naming is solid though, keep that up.
yeah figma exports are notorious for generating messy code like this. those absolute positions will bite you later when you try to make it responsive. consider using css variables for your colors and maybe swap some of those divs for semantic html tags
The absolute positioning approach you’ve taken directly from Figma is actually quite typical when starting out, but it creates maintenance headaches down the road. What I discovered after making similar mistakes is that Figma’s CSS export treats everything like a static design rather than a dynamic web component. Your structure would benefit from semantic HTML elements instead of generic divs everywhere - consider using <header> for the title section and <table> or <section> for the data container depending on your content type. The bigger issue is that absolute positioning breaks immediately when content changes or screen sizes vary. I’d recommend rebuilding this using CSS Grid for the main layout and Flexbox for internal spacing. Start by removing all the absolute positions and left/top values, then use display: grid on your main container and define proper grid areas. This approach scales much better when you need to add responsive design later.
honestly the figma css export is kinda trash for production code. all those absolute positions will break on different screen sizes. id suggest using flexbox or grid instead and maybe look into vue’s scoped styles so your css doesnt leak everywhere