
Just a guy who loves to write code and watch anime.
Search for a command to run...

Just a guy who loves to write code and watch anime.
neat trick! Thank you for sharing
Qualities that make outstanding builders.

Bipedal vs quadrupedal: how many legs This is about the number of legs the creature walks on. Bipedal. Two legs. Humans, ostriches, T-rex, kangaroos, most fantasy humanoids. Quadrupedal. Four legs. Do

Intro You hear "lerp" and "smoothstep" everywhere in game dev. They sound like math jargon. They're not. Both are small tools that do the same job: smoothly move from one value to another. The problem

What is Kinematics Kinematics is the math field. It's the study of how things move without worrying about forces (which would be dynamics). FK and IK are the two branches: forward kinematics and inver

Intro Textures are usually the biggest cost in a 3D scene. Memory, bandwidth, and load time all get eaten by them. Resizing them is the obvious lever. There's more. This post is about the less obvious

In this article, I want to share how I enjoy working with CSS. I really love working this way as it is quite effective and simple.
In one of my previous articles, I spoke about why I have gone back to working with vanilla CSS from being a fan of Tailwind CSS.
You can read it here: Why I prefer vanilla CSS over Tailwind.
I enjoy following the BEM convention, though, I don't strictly stick to it, sometimes I'll loosen up but it depends on the situation. Honestly, I don't even remember the details of the BEM convention, but that's where I got it.
Let me share an example.
<div class="card">
<h1 class="card__title">Title</h1>
<h2 class="card__subtitle">Subtitle</h2>
<div class="card__actions">
<button class="card__actions-close">Close</button>
<button class="card__actions-save">Save</button>
</div>
</div>
As for the CSS styles, I'll have them in a separate CSS file.
More about BEM: https://getbem.com/naming/.
Now, I assume you're familiar with working with the Dev Tools, inspecting as well as changing CSS styles in the Dev Tools.
I enjoy styling my content in the Dev Tools then copying the styles from the Dev Tools and pasting them into the code (the class of the element). This way you can be really productive when working with CSS while also caring about the details of the UI.
Images below to demonstrate.


Right-click on the styles for the menu to pop up.

Yep, that's it. I love working this way, and it really is vanilla CSS.
Simple & elegant.