Is it better to have reusable classes or a single class for each element?
Should I make classes like bg-blue, padding-10px, etc., or group all properties of one element in one class? I tried to do the reusable classes approach but sometimes I need to do something that's specific to the element I'm working on. Should I do both? So an element can have some of these reusable classes and if needed, add a special class.
1 Reply
at the end of the day, it's preference, but generally on this server I think folks tend to prefer custom classes over utility classes (which is what
bg-blue and such are)
tailwind is a very popular utility class framework that goes fully into that kind of classification, but there's a lot of hate for the look of the HTML you end up with when you use a ton of utility classes
I personally think overuse of utility classes is inline styles with extra steps, so I always just write classes for the things that need them, and have duplicate rules if I need to. You can use variables to minimize the number of places you have to adjust things like colors and font-sizes if you make different design decisions
that said, there totally is a place for utility classes, even in that kind of design. Say I have three kinds of buttons in a design that look the same except for the color. I could make three entire classes with a ton of duplicated code, or I could have a bg-blue class (or better still, something with a semantic name like priority) and then have my button like this <button class="btn priority"> to override the default color on the button