Could you suggest how it's bloating the markup and how it'll bite you in the lon...

Karawebnetwork · on Nov 2, 2018

Adding some classes is alright. Things like "row", "column-6" are tolerated evils.

Look at the button from his article:

That's way too granular.

corobo · on Nov 2, 2018

So you're just talking in terms of visual bloat?

On this page it documents how you can create component classes https://tailwindcss.com/docs/extracting-components/

   <button class="btn-blue">
     Button
   </button>

Then in your style

   .btn-blue {
     @apply bg-blue text-white font-bold py-2 px-4 rounded;
   }
   .btn-blue:hover {
     @apply bg-blue-dark;
   }

Karawebnetwork · on Nov 2, 2018

The problem with granular classes is that you project won't scale in an efficient way. It also makes refactoring almost impossible.

On a small one page website, do use them. However in something more complex like an e-commerce website theme or a complex web app, you will regret it quickly.

is no better than

It is simply a fancy way to use inline styles.

One of the selling points of CSS is the ability to scale and refactor very quickly and easily. Class based frameworks remove all those benefits. Extracting components and building sementically is the solution. As I said in my previous comment, that framework they are using supports it. They say it themselves:

    “*While we strongly believe you can get a lot further with just utilities than you might initially expect, we don't believe that a dogmatic utility-only approach is the best way to write CSS.*”

I have worked on many contracts where the client came to us because their current web agency wanted to charge crazy prices to refresh their website's design (e-commerce websites change at least one a year). Almost every time, those projects are a pain for both the team and the client because the previous developer decided to be lazy and use classes or inline styles everywhere.

vntok · on Nov 2, 2018

  .btn-blue {
    background:blue; color:white; font-weight:bold; padding: 
  4px 2px; border-radius:50%
  }

jacamat · on Nov 2, 2018

It’s not reusable. It’s not consistent. It’s not scoped.

It may be hard to see now how it will bite you now, but I promise you, it will. It would take hours to explain why, but I am speaking from years of experience here.

There is a reason large organizations have abandoned this approach, and it isn’t just personal preference.

This talk gives a pretty good explanation, Airbnb.design, Netflix, Facebook, and Instagram have many others

https://youtu.be/TuLY1cYM57g?t=530