4 ms·

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

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% }

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% }