Discussion on: Style beautiful web pages without writing any CSS. Using W3.CSS.

[ohffs]

I think tailwindcss is a nice middle-ground - you can use the pure 'utility' approach like :

<div class="shadow bg-primary px-4 py-8">Nav here</div>

But you can also 'compose' classes out of the utilities in your css/sass by doing :

.nav {
  @apply shadow bg-primary px-4 py-8;
}
...
<div class="nav">Nav here</div>

I've found it works quite well - those one-off things can keep their one-off utlities, but as you find common/re-used blocks and components you can style them as one thing.

[Ben Sinclair]

That makes more sense to me because it's still keeping the presentation stuff in the presentation box.

[Louis Low]

Same here. I also can use Yogurt CSS to expose it's utility modules into a custom class for those who dislike to inline the styles in their HTML. And also, it is an easy and quick way to refactoring or migrating their existing stylesheet to Yogurt CSS.

<y class="nav">
  Who's stylish?
</y>

.nav {
  @extend
    .px-3,
    .py-2,
    .text-teal-100,
    .bg-teal-400;

  &:hover {
    @extend
      .bg-teal-500,
      .shadow;
  }
}