I find myself struggling with this question. Maybe some of you have come up with good reasons that might help me decide.
Back when I used Bootstrap and Foundation, I started like so many others adding classes to my HTML like `container-lg` and `p-3`.
As I got into more semantic coding and switched to Foundation (Bootstrap fatigue was a thing back then), I realized that it was meant to be used within your SCSS instead, so I could use classes like `main-content` and `lead-paragraph` and just use mix-ins in the SCSS file like `@include flex-grid-row(null, expand, 5, true, true, 1rem)`. This was great and kept the HTML very nice and readable without long lists of class names.
Now with TailwindCSS, I find myself crafting either classes like `py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75` or long lists of rules in SCSS like `.my-button { @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75; }`, both of which are equally ugly, confusing, and unmaintainable - moving complexity from HTML to SCSS isn't a good answer, though it has the benefit of reusable classes.
So what have you done? I liked Foundation's way of using mix-ins, but it seems to be the only framework that did it that way. I don't want to litter my HTML with utility classes, and making the CSS semi-unreadable isn't an ideal solution for me.
0 comments
—
Ask HN: Utility classes vs. semantic classes · HackerTrans
Back when I used Bootstrap and Foundation, I started like so many others adding classes to my HTML like `container-lg` and `p-3`.
As I got into more semantic coding and switched to Foundation (Bootstrap fatigue was a thing back then), I realized that it was meant to be used within your SCSS instead, so I could use classes like `main-content` and `lead-paragraph` and just use mix-ins in the SCSS file like `@include flex-grid-row(null, expand, 5, true, true, 1rem)`. This was great and kept the HTML very nice and readable without long lists of class names.
Now with TailwindCSS, I find myself crafting either classes like `py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75` or long lists of rules in SCSS like `.my-button { @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75; }`, both of which are equally ugly, confusing, and unmaintainable - moving complexity from HTML to SCSS isn't a good answer, though it has the benefit of reusable classes.
So what have you done? I liked Foundation's way of using mix-ins, but it seems to be the only framework that did it that way. I don't want to litter my HTML with utility classes, and making the CSS semi-unreadable isn't an ideal solution for me.