3 ms·

Could you suggest how it's bloating the markup and how it'll bite you in the long run? I understand that maybe adding a bunch of classes for every element will

by corobo 8y ago

Could you suggest how it's bloating the markup and how it'll bite you in the long run? I understand that maybe adding a bunch of classes for every element will increase the overall size of the page but if it's served with gzip compression doesn't it actually (maybe only technically) work better to have repetitive classes everywhere instead of unique class names?

Raphmedia 8y ago
Adding some classes is alright. Things like "row", "column-6" are tolerated evils. Look at the button from his article: <a class="text-xl rounded bg-orange pt-1 pb-1 pr-4 pl-4 text-white hover:text-white no-underline leading-loose" href="#">Buy for $10</a> That's way too granular.
- corobo 8y ago
  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/ 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; }
  - Raphmedia 8y ago
    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. <a class="text-xl rounded bg-orange pt-1 pb-1 pr-4 pl-4 text-white hover:text-white no-underline leading-loose" href="#"> is no better than <a style="font-size:16px; border-radius:5px; background:orange; color: white; text-decoration: none;" href="#"> 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 8y ago
    .btn-blue { background:blue; color:white; font-weight:bold; padding: 4px 2px; border-radius:50% }
jacamat 8y ago
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 https://youtu.be/TuLY1cYM57g?t=530

by corobo 8y ago

Raphmedia 8y ago

Adding some classes is alright. Things like "row", "column-6" are tolerated evils. Look at the button from his article: <a class="text-xl rounded bg-orange pt-1 pb-1 pr-4 pl-4 text-white hover:text-white no-underline leading-loose" href="#">Buy for $10</a> That's way too granular.

corobo 8y ago
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/ 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; }
- Raphmedia 8y ago
  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. <a class="text-xl rounded bg-orange pt-1 pb-1 pr-4 pl-4 text-white hover:text-white no-underline leading-loose" href="#"> is no better than <a style="font-size:16px; border-radius:5px; background:orange; color: white; text-decoration: none;" href="#"> 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 8y ago
  .btn-blue { background:blue; color:white; font-weight:bold; padding: 4px 2px; border-radius:50% }

jacamat 8y ago

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 https://youtu.be/TuLY1cYM57g?t=530