Question

I created many basic classes in CSS, like “rounded”, “hidden”, “red”, “floated”, etc… and I use them like if they were LEGO pieces, in order to get the desired result. Why? Because my sites are rendered dinamically, and they may have multiple options. I did not want to create one single class for each possible combination, so I decided to make multiple classes and assign each div for, five or even six different classes. On the other hand, I heard about the DIVITIS issue. I know all the divs I use are neccessary. But my question is:

Is any of those things a problem? I mean, for rendering it on different devices, or render-time, etc…

Use example:

<div class="block spgreen toprounded">
<div class="boxnm left nmquart blue mkPln btn topLrounded"><h1 class="pdg txtCenter">Inicio</h1></div>
<div class="boxnm left nmquart green mkPln btn active"><h1 class="pdg txtCenter">Navegar</h1></div>
<div class="boxnm left nmquart orange mkPln btn"><h1 class="pdg txtCenter">Aprender</h1></div>
<div class="boxnm left nmquart red mkPln btn topRrounded"><h1 class="pdg txtCenter">Compartir</h1></div>
</div>

EDIT:
Each css class has no more than 5 attributes.

EDIT 2:
I based my design on “blocks” and “boxes”. Blocks have overflow auto, and boxes are always floated. They can have 4 different sizes (width): 25%, 50%, 75%, 100%.
Then I created a list of “magic properities”, like: shadow, rounded, and so on… in order to control all the stuff as I. The question is if this can be “wrong” for google to index my pages, or for android phones to render it, or or or…

Some css could be:

div.block{ /* Block lines (will contain floated boxes) */
 position:relative;
 overflow:auto;
}
div.box{
 position:relative;
 margin:.5%; /* +1% (both-sides) */
}
 div.box.nm{
 margin:0;
}

/* Position */
.center{
 margin:.5% auto !important;
}
.left{
 float:left;
}
.right{
 float:right;
 text-align:right;
}

Answer 1

Personally I prefer to name css class for what they are, rather than what they look like, eg:

<div class="menu">...
<label class="caption">...

I would then create a class definition that sets red, and set all the classes to it.

eg .menu, .menu .caption{color:red};

etc etc.

That way you can define a completely different style and the css naming stays true. If you’ve got classes called red, rounded and so on, you’re stuck with that styling, or else the names become meaningless.

Of course, this might not tie in with your “dynamic rendering”, but you’ve not said what that entails.