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.

Classes

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: getbem.com/naming.

Dev Tools

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.

Conclusion

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

Simple & elegant.