What are the best practices for writing maintainable CSS?
- by Art
I am just starting to explore this area and wonder what are the best practices when it comes to production of clean, well-structured and maintainable CSSes.
There seems to be few different approaches to structuring CSS rules.
One of the most commonly encountered ones I saw was throwing everything together in one rule, i.e. margins, borders, typefaces, backgrounds, something like this:
.my-class {
border-top:1px solid #c9d7f1;
font-size:1px;
font-weight:normal;
height:0;
position:absolute;
top:24px;
width:100%;
}
Another approach I noticed employed grouping of properties, say text-related properties like font-size, typeface, emphasis etc goes into one rule, backgrounds go into other, borders/margins go into yet another one:
.my-class {
border-top:1px solid #c9d7f1;
}
.my-class {
font-size:1px;
font-weight:normal;
}
.my-class {
height:0;
top:24px;
width:100%;
position:absolute;
}
I guess I am looking for a silver bullet here which I know I am not going to get, bet nevertheless - what are the best practices in this space?
