CSS optimization - extra classes in dom or preprocessor-repetitive styling in css file?

Question

I'm starting on a fairly large project and I'm considering the option of using LESS for pre-processing my css.

the useful thing about LESS is that you can define a mixin that contains for example:

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
}

and then use it in a class declaration as

.rounded-div {
   .border-radius(10px);
}

to get the output css as:

.rounded-div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

this is extremely useful in the case of browser prefixes. However this same concept could be used to encapsulate commonly-used css, for example:

.column-container {
    overflow: hidden;
    display: block;
    width: 100%;
}
.column(@width) {
    float: left;
    width: @width;
}

and then use this mixin whenever I need columns in my design:

.my-column-outer {
    .column-container();
    background: red;
}
.my-column-inner {
    .column(50%);
    font-color: yellow;
}

(of course, using the preprocessor we could easily expand this to be much more useful, eg. pass the number of columns and the container width as variables and have LESS determine the width of each column depending on the number of columns and container width!)

The problem with this is that when compiled, my final css file would have 100 such declarations, copy & pasted, making the file huge and bloated and repetitive. The alternative to this would be to use a grid system which has predefined classes for each column-layout option, e.g. .c-50 ( with a "float: left; width:50%;" definition ), .c-33, .c-25 to accommodate for a 2-column, 3-column and 4-column layout and then use these classes to my dom.

I really dislike the idea of the extra classes, from experience it results to bloated dom (creating extra divs just to attach the grid classes to). Also the most basic tutorial for html/css would tell you that the dom should be separated from the styling - grid classes are styling related! to me, its the same as attaching a "border-radius-10" class to the .rounded-div example above!

On the other hand, the large css file that would result from the repetitive code is also a disadvantage

So I guess my question is, which one would you recommend and which do you use?

and, which solution is best for optimization? apart from the larger file size, has there even been any research on whether browser renders multiple classes faster than a large css file, or the other way round?

I'd love to hear your opinion!

Answer 1

From my point of view, compiling LESS on client side using JS can reduce your performance and it will have an extra load on browser. But if you can compile it on server then web server can gzip and transfer it to client.
Anyway, personally I prefer compilation on server side because:

1. I cant trust performance JS LESS compiler on non-modern browsers
2. Even I cant trust functionality of client side compilers, because each browser can have it's own output. On the other hand, I can rely on my server side compile job.