Too many classes vs flexibly readable css classes [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I'm working on a responsive theme that I want to sell. I really want to make it easy to understand at a glance what's going on. One of the tradeoffs of moving from foundation 3 to bootstrap 3 and Foundation 4 (in my opinion, and as noted elsewhere), is the nearer - verbose naming you have to adopt when designing for multpile screen sizes.
Thus, I've tried as much as possible to achieve something like this:
<a class="button soluks_button square_round no_bold">Button</a>
OR This
<a class="custom-button green square-round button-in-navbar text-shadow">Button</a>
Given I'm building my styles on top of bootstrap and foundation, is this too much? or is it okay as long as its readable?

Answer 1

You should make use of a CSS preprocess such as SASS or LESS to keep the HTML semantic and significantly easier for your end-users to work with.
Using the SASS directive #extend, you could give class names as you are currently doing, but extend them in the css rather than forcing the user to remember to include each one in the html. However, by using #extend, the classes could still be applied individually if needed/ if the user wanted to change the default. Something like this:
.button {
display: inline-block;
}
.square-round {
#extend .button;
border-radius: 5px;
}
.no-bold {
font-weight: normal;
}
.soluks_button {
#extend .square-round; // which extends .button by inheritance
background: blue;
}
Then your html could be much more semantic and just give the class of the actual element itself:
<a class="soluks_button no-bold">button</a>
And for the purpose of a versatile theme, to change the default or add an additional style a user could still do:
button