DEV Community

Utility-first CSS - You have to try it first!

Michael Z on June 18, 2019

Originally posted at michaelzanggl.com. Subscribe to my newsletter to never miss out on new content. Years ago, Bootstrap has already provided u...

Read full post

Dale Anderson • Aug 19 '19

While I can appreciate the simplicity and directness of this approach, it misses a fundamental aspect of CSS and HTML that many people miss - it's about semantics, about creating a domain specific language that clearly expresses the intent of the styling and markup. For example, it might be appropriate in an application to style buttons two different ways - rather than implement two different buttons each with their own set of paddings, margins, etc., etc., we implement two CSS classes with a name that clearly expresses the intended use - primary, navigation, etc.

There is also a good point in Sean's tweet in the previous comments about building with utilities and refactoring emerging patterns - definitely sage advice, but I feel there is a parallel with TDD here. Do your UI/UX design first and then make your acceptance tests pass - a skilled designer will know the common design patterns and guidelines (e.g. Google's Material Design) and be able to incorporate them into a design language for the application, without needing to refactor them out later.

All works in theory, anyway :)

José Rocha • Aug 29 '19

@apply?

Michael Z • Aug 19 '19

You can still create vue/react/... components for each thing you want to represent. That way, modifiers (size, color etc.) simply become props.

Dale Anderson • Aug 19 '19

Yeh, true, components do give you another way of encapsulating styling - the whole "CSS in JS" thing. There isn't a right or a wrong way, or even better or worse, just pros and cons. I'm one of these strange people who actually kinda likes CSS despite its quirks and thinks it's fit for purpose, so I'll always advocate using it semantically, but each to their own! Good food for thought anyway.

perpetual . education • Sep 16 '20 • Edited

This looks horrendous! My HTML will be forever ruined!!

That's what we still think

codepen.io/sheriffderek/pen/QWwyJmB

Why? When you could write this?

<user-card class='modifier?'>
  <picture class='avatar'>
    <img src='{{user.image}}'>
  </picture>

  <h1 class='name'>@{{user.handle}}</h1>
  <h2 class='title'>{{user.title}}</h2>

  <footer class='actions'>
    <a class='link' href='{{user.url}}'>
      {{user.cta}}
    </a>
  </footer>
</user-card>

perpetual . education • Sep 16 '20

What if you wanted to switch CSS later?

Michael Z • Sep 16 '20

I go more into detail regarding the benefits in this interactive tutorial: learning-by-vueing.netlify.app/tai...
Mind giving it a go?

perpetual . education • Sep 16 '20

We'll check it out = but this type of URL https://learning-by-vueing.netlify.app/tailwind/pre/ is quickly becoming it's own meme. learning + vueing + netlify + app + tailwind + and even pre ! haha.

perpetual . education • Sep 16 '20 • Edited

Your playground area is cool. And the way you explain it is nice. Great job.

However, maybe we're crazy... but we LIKE CSS. So, we're not in any hurry to abstract it away. We've also built out really complex them-able systems (think old myspace) - and we're not seeing any pros of having super horrendous markup. Especially when you add in all of the dynamic properties and stuff...

<li x-for="someArray as currentItem" @event="doSomething" class="xd=15 color-blue-1299 roundy-thingies small-but-big-on-small-medium-exept-when-not shadow-small-lighter float-left-only-on-large etc etc-2">{{currentItem.content}}</li>

vs.

{{#forEach users as |user|}}
  <UserCard @model='user' />
{{/forEach}}

<user-card>
  <h2 class='name'>{{model.name}}</h2>
  <h3 class='title'>{{model.title}}</h3>
</user-card>

user-card
  round-corners()
  drop-shadow()
  padding: $pad
  .name
    attention-voice()
  .title
    calm-voice()
    margin-top: $pad

Or something readable. (not sure if this is valid / but for example)

Tailwind is GREAT if you are trying to avoid being a front-end developer / but we enjoy writing code for the front-end.

Michael Fasani • Jun 27 '20 • Edited

I tried tailwind for the first time today. Originally I saw the code and was just like what a complete mess... I hate it. 20 minutes later... I really like it. Actually I have always felt like CSS does not scale well on large projects, it grows and grows and grows and then there is dead CSS everywhere.... and it's nested and kind of awkward. It does bloat the HTML but this could be minimized in the same way Facebook showed with their stylex library. I will need to create multiple themes and colour schemes so maybe I am biast because I think for that it will work really well.

Michael Z • Jun 28 '20

That's great to hear! If you feel a little skeptical I also created a free interactive tutorial on Tailwind here which covers even more benefits than this blog post.

Sean G. Wright • Jun 18 '19 • Edited

Glad to see a nice overview of utility CSS. Thanks for writing this!

I've been trying to describe the benefits, as I see them, too.

Liquid error: internal
(twitter.com/seangwright/status/113...)

and

Liquid error: internal
(twitter.com/seangwright/status/113...)

"Content-layer semantics are already served by HTML elements

"Class names impart little or no useful semantic information to machines

"The primary purpose of a class name is to be a hook for CSS and JavaScript

"Class names should communicate useful information to developers

There are so many cool things we can learn by turning out preconceptions about CSS on their heads. 🙃

Milos • Aug 18 '19

Great article. I have switched to TWCSS from Bootstrap and it is really easy to work with once you get your mind around it. Especially responsive design. Cheers!

Milos • Dec 12 '19

Hi I have written an article on how to integrate TailwindCSS with Angular8 - dev.to/laptoptheone/tailwindcss-an...