What’s the Best Way to Build Static Websites as a Beginner?

Avoid Tailwind for now. It tends to promote some anti-patterns, like effectively inlining all your styles. Focus on learning the fundamentals first. When it comes to BEM and CSS variables, start familiarizing yourself with them early on. CSS variables are becoming a core concept in styling, and understanding how to structure your components can be beneficial as your projects grow.

For recreating Figma designs, I tend to keep it simple—HTML, CSS, and JavaScript. Once you grasp the basics, consider experimenting with tools like Astro or SASS, but don’t rush into Tailwind just yet unless you're working on component-heavy applications. BEM might be a bit much right now; focus on getting your hands dirty with the fundamentals first.

As a beginner, embrace plain HTML and CSS. You'll build a strong foundation that will serve you well in understanding more complex tools later on. CSS variables are integral to modern CSS, so definitely use them when needed. Don’t worry about adopting BEM until your projects require more complexity in naming conventions. Tailwind is great, but you don’t want to rely on it before mastering CSS.

If you're just starting out, I'd recommend sticking with plain CSS first. It's crucial to grasp the basics solidly before diving into frameworks like Tailwind. You'll encounter countless situations where a project doesn't use Tailwind, and knowing CSS is going to be invaluable. Plus, understanding how to write plain CSS will help you in the long run, even if you decide to use Tailwind eventually.

I usually opt for pure HTML, CSS, and a bit of JavaScript for static sites. If you foresee the need for reusable components, sometimes frameworks like Astro can be handy. Tailwind? Not a big fan as it complicates debugging styles within a browser. BEM is useful for consistency, but don't stress about it initially—writing organized, semantic CSS should take priority.