I’ve the following code in HTML:
<h2 class="c-signing-form__heading c-heading-4">
sign for a new account now!
</h2>
I have a CSS component called sigining-form which has a child called c-sigining-form__heading. But I’ve another component called c-heading-4 which basically give my h2 a particular font-size, font-weight, etc and that component (the c-heading-4) gets its styles from a SASS mixin with same name.
My question is wouldn’t it be better if I call the mixin on the main component c-signing-form__heading and omit the c-heading-4 component so whenever I’ve the c-signing-form__heading component, I won’t have to add the c-haeding-4?
2
Answers
This is perfectly fine to use multiple classes for one element.
Tailwind is a CSS library that expoits that concept to the extreme, but in general – multiple, reusable classes are the way to go when you want to style different elements, using consistent and repeatative styles.
It’s common place to have multiple css classes to style an element. Especially when one style is going to be used in multiple places and only needs slight customization. You said that ‘c-heading-4’ has font-size, font-weight, etc. You might want to call this class something like ‘default-heading’ and make it assessable so you can refuse it elsewhere.
-Travis