Yes. Utility-First uses classes so the property:values does one thing and can be easily combined and reused.
When you define selector on your own, you are mostly going to duplicate the css property:value in it. Which causes CSS size to grow, you have to use modifiers to change the css on certain places like button button--red. This is less likely to happen with utility first.
What you call button button--red I just call <button class="danger">, which will need one selector for the button element and one for the .red class, which will work for any element, not just buttons.
When done right, this gives you a complete n * m elements you can style, with every colour applying to every element type (although, of course, in reality some of them will not be implemented because YAGNI).
My bad, the button--red example was not showing the problem enough.
I am talking about reusing a button in an efficient way. What I mean by that is, when for example a button is used on multiple places and needs various indentation, colors, paddings and alignment.
You can't solve that by just one class. How would you solve that?
The way you phrase that question doesn't even make sense when we're talking about proper rule-based CSS; what's the context for these different indentations, colours, paddings, etc.? Does it depend on the surrounding elements? are certain buttons special? Is there just no clear design idea and every button just gets positioned by hand?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Yes. Utility-First uses classes so the property:values does one thing and can be easily combined and reused.
When you define selector on your own, you are mostly going to duplicate the css property:value in it. Which causes CSS size to grow, you have to use modifiers to change the css on certain places like
button button--red. This is less likely to happen with utility first.More info => dev.to/machy8/comment/1p2jj
What you call
button button--redI just call<button class="danger">, which will need one selector for thebuttonelement and one for the.redclass, which will work for any element, not just buttons.When done right, this gives you a complete
n * melements you can style, with every colour applying to every element type (although, of course, in reality some of them will not be implemented because YAGNI).My bad, the
button--redexample was not showing the problem enough.I am talking about reusing a button in an efficient way. What I mean by that is, when for example a button is used on multiple places and needs various indentation, colors, paddings and alignment.
You can't solve that by just one class. How would you solve that?
The way you phrase that question doesn't even make sense when we're talking about proper rule-based CSS; what's the context for these different indentations, colours, paddings, etc.? Does it depend on the surrounding elements? are certain buttons special? Is there just no clear design idea and every button just gets positioned by hand?