CSS optimization - extra classes in dom or preprocessor-repetitive styling in css file?
- by anna.mi
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 outputted 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 compliled, 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, eg .c-50 ( with a "float: left; width:50%;" definition ), .c-33, .c-25 to accomodate for a 2-column, 3-column and 4-column layout and then use these classes to my dom.
i really mislike 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?
tnx! i'd love to hear your opinion!
