DEV Community

Stop using inline CSS (praise utility classes!)

Jacob Paris on May 04, 2019

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 argu...
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 • 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