Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Jacob Paris
Jacob Paris

Posted on

     

Stop using inline CSS (praise utility classes!)

You've heard it all before — code-style evangelists preaching from the heavens aboutSeparation of Concerns andClean 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:

<pstyle="font-weight: bold; text-align: right;"/>
Enter fullscreen modeExit fullscreen mode

and this

<divstyle="display: flex; padding: 1rem; margin: 1rem;"/>
Enter fullscreen modeExit fullscreen mode

and this

<imgstyle="border-radius: 50%;"src="cat.gif"/>
Enter fullscreen modeExit fullscreen mode

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

<pclass="font-weight-bold text-right"/>
Enter fullscreen modeExit fullscreen mode

and this

<divclass="d-flex p-1 m-1"/>
Enter fullscreen modeExit fullscreen mode

and this

<imgclass="img-rounded"src="cat.gif"/>
Enter fullscreen modeExit fullscreen mode

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

Top comments(6)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
angeliquejw profile image
Angelique
solving problems while writing smarter code + teaching others to do the same // pronouns: she/hers
  • Location
    Baltimore, MD
  • Work
    Engineering Manager
  • Joined

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! 🙌🏻

CollapseExpand
 
lukejs profile image
Luke
  • Location
    Birmingham, West Midlands, UK
  • Joined
• Edited on• 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.

CollapseExpand
 
xowap profile image
Rémy 🤖
I spent my adolescence in Dreamweaver, my student years in Vim and my adult life in PyCharm.
  • Location
    Madrid
  • Education
    Telecommunications Engineer
  • Work
    CTO at WITH Madrid
  • Joined

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.

CollapseExpand
 
lukejs profile image
Luke
  • Location
    Birmingham, West Midlands, UK
  • Joined

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.

CollapseExpand
 
xowap profile image
Rémy 🤖
I spent my adolescence in Dreamweaver, my student years in Vim and my adult life in PyCharm.
  • Location
    Madrid
  • Education
    Telecommunications Engineer
  • Work
    CTO at WITH Madrid
  • Joined

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.

CollapseExpand
 
jacobmparis profile image
Jacob Paris
Sales funnels and B2B SaaS for the mortgage industry, almond latte fanatic, LA @eggheadio , formerly ToolStache
  • Location
    Toronto, ON
  • Work
    Senior Developer at Fintech
  • Joined
• Edited on• 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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Sales funnels and B2B SaaS for the mortgage industry, almond latte fanatic, LA @eggheadio , formerly ToolStache
  • Location
    Toronto, ON
  • Work
    Senior Developer at Fintech
  • Joined

More fromJacob Paris

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp