QR code component

What are you most proud of, and what would you do differently next time?

What I'm most proud of?

I managed to make the user interface as similar as possible in terms of element layout and size.

What would I have done differently?

Probably in terms of using CSS methodologies other than BEM (Block Element Modifier), but of course I have to dive in one by one.

What challenges did you encounter, and how did you overcome them?

The challenge I faced?

It was about naming the class, because sometimes I was confused about what to name it and how to pattern the class name correctly.

How did I overcome this?

By looking at several naming references and using the BEM (Block Element Modifier) method, I found it helpful to be able to write CSS classes in a structured manner.

What specific areas of your project would you like help with?

Maybe in terms of naming CSS custom properties, is it okay if we store variables in a class selector or id instead of storing them in a css pseudo-class like :root? although my intention of writing it that way is to make it reusable. or is there another better way?

.card {
--padding: 16px;

padding: var(--padding);
max-width: calc(320px - var(--padding) * 2);
}