DEV Community

loading...

Stop using inline CSS (praise utility classes!)

jacobmparis profile image Jacob Paris ・1 min read

You've heard it all before — code-style evangelists preaching from the heavens about Separation of Concerns and Clean Code. It's often hard to argue with them. HTML is for layout, and CSS for styling. Well, mostly, anyway. So we've collectively decided as a species to stop writing code like this:

<p style="font-weight: bold; text-align: right;" />

and this

<div style="display: flex; padding: 1rem; margin: 1rem;" />

and this

<img style="border-radius: 50%;" src="cat.gif" />

And instead moved to the totally different UTILITY CLASSES so our code can look like this!

<p class="font-weight-bold text-right" />

and this

<div class="d-flex p-1 m-1" />

and this

<img class="img-rounded" src="cat.gif" />

I would like to personally thank each and every one of you for your efforts in cleaning up the web and ensuring HTML and CSS never mingle again

Discussion (6)

Collapse
angeliquejw profile image
Angelique

Also recommend prefixing your utility classes (e.g. u-img-rounded) to always make it clear that the classname relates to a utility and likely shouldn't be mucked with. Also, if you're writing Sass, also easy and helpful to make your utility classes available as mixins! 🙌🏻

Collapse
lukejs profile image
Luke • Edited

I'm quite fond of utility-first CSS frameworks like Tailwind CSS at the moment. It takes a bit of adjustment, but makes styling and adjusting your HTML so much quicker and easier.

Collapse
xowap profile image
Rémy 🤖

That's a troll right? Please tell me you're trolling. And that Tailwind CSS is a huge troll. 1755 commits sure is a lot of effort put into trolling.

Collapse
lukejs profile image
Luke

HAHA the original post did read a bit funny to me at first.

I'm being serious. I decided to jump in about 6 months ago and it totally changed how I write and manage my CSS. Seriously, don't knock it until you try it! The 1755 commits aren't there for fun, it's a great tool.

I was hesitant at first like you and thought it looked absurd, but I would choose utility-first CSS frameworks every time now.

It provides the ease of Bootstrap, but you can tailor it to your unique design and needs.

Collapse
xowap profile image
Rémy 🤖

I thought this article was funny until I looked up utility classes and saw that people are doing this for real. Then I put a horrified face on.

Collapse
jacobmparis profile image
Jacob Paris Author • Edited

Oh thank god you agree I was starting to worry I was being too subtle

Everyone else is being too subtle I can't tell if they're joining in

Forem Open with the Forem app