Understanding utility classes
When using utility classes is it best to use them for design elements that won't change too much? I'm asking this because I created a text-align-center class but the alignment will change depending on screen size.
So is it better to just use a media query on a component rather than using a utility class?
I'm new to using utility classes so I'm not the most familiar with how they work...
If you have any guides for them please let me know ๐
3 Replies
it depends ๐
If you want to go all out with utiities, you can make them for specific sizes, like
.text-center, .text-center-md, .text-center-xl etc, and it applies at the "md" and "xl" sizes, and up, usually.
I don't generally do down that road, but it's an option that people use.if you take the utility classes' route to the extreme, you get tailwind
personally, i use utility classes for something that only affects a specific element or something i will change in js
Ive been guilty of making a mini tw ; i dont like to use tw but for large sites , I have some classes like
Usually applied on elements that just need those styles and nothing else eg i would just be giving it a class to apply grid and gap; However if it exceeds 4 utility classes , or I have to make a selector for other styles anyway then ill keep all the styles together w the class. Its probably not best practice so I don't want to recommend it; just sharing a system that's worked for me. Don't want to give every element a class just to repeat styles over and over. I think the rule of thumb is if you find yourself repeating styles a lot, its probably a good candidate for a utility class. But if an element needs a lot of other styles and you need to give it a class anyway just keep those styles together. I hope this makes sense I havent slept
.accent-color , . grid , . row , . ai-cen , . container , . gap-1 to name a few.Usually applied on elements that just need those styles and nothing else eg i would just be giving it a class to apply grid and gap; However if it exceeds 4 utility classes , or I have to make a selector for other styles anyway then ill keep all the styles together w the class. Its probably not best practice so I don't want to recommend it; just sharing a system that's worked for me. Don't want to give every element a class just to repeat styles over and over. I think the rule of thumb is if you find yourself repeating styles a lot, its probably a good candidate for a utility class. But if an element needs a lot of other styles and you need to give it a class anyway just keep those styles together. I hope this makes sense I havent slept