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
Latest comments (6)
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.
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
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.
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.
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.
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! 🙌🏻