LESS - Should I avoid unneeded nesting? [closed] - css

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 8 years ago.
Improve this question
As a result of using less I have started to use nesting more and more. It's clean and easy to follow, but I use more selectors than normal because of nesting.
For example (simplified):
#footer {
background: #footer-background;
padding: 20px 0;
margin-bottom: 20px;
.seal {
width:22%;
img {
display:block;
margin:0 auto;
}
}
.copyright {
margin: 20px 0 0;
}
}
Or:
#footer {padding: 20px 0; margin-bottom: 20px}
#footer .seal {width:22%}
#footer img {display:block; margin:0 auto}
.copyright {margin: 20px 0 0}
The first will result in additional selectors that are not really needed, but it also prevents duplication and makes it easy to find and remove all unused/unneeded/duplicated css. All of this happens because your less files have a structure.
I think that the reduction in development time is worth the extra selectors. I think that my development time would be better spent elsewhere... but I'm not confident in that answer.
Should I avoid unneeded nesting, or is the gain worth the loss?

Answer 1

You Can Achieve Both Organization and Minimal Specificity
It is generally recommended to use the least specific selector to do the job. If your main desire is to also do some nesting in LESS for structural organization, then you can achieve the best of both worlds. Take your simplified example modified:
LESS
#FOOTER() {
#footer {
background: #footer-background;
padding: 20px 0;
margin-bottom: 20px;
.seal {
width:22%;
}
img {
display:block;
margin:0 auto;
}
}
.copyright {
margin: 20px 0 0;
}
}
#FOOTER();
CSS Output (your original shorter code)
#footer {
background: some color you set for #footer-background;
padding: 20px 0;
margin-bottom: 20px;
}
#footer .seal {
width: 22%;
}
#footer img {
display: block;
margin: 0 auto;
}
.copyright {
margin: 20px 0 0;
}
I've used a mixin with a set of parenthesis to "group" styles related to the footer area, and call that mixin to actually output the styles. This allows me to keep the code together, and insert it "wherever" in my final output css. But the styles can then be a bit more loosely grouped under that. So I have moved the img outside the .seal, and the .copyright outside the #footer. It may be true that the img is found in the html inside the .seal, or the .copyright inside the #footer, but if that is not relevant to selecting it, then simply knowing it is related to the #FOOTER() group may be enough for your organizational needs.
This is still an improvement over merely a /*comment*/ that sets apart a group, because it does still minimize duplication (#footer is not duplicated), and it does allow me to output the css in an organized way--one can envision this:
#RESET();
#HEADER();
#CONTENT();
#FOOTER();
Inside #HEADER(); may be some other sub-groupings:
#NAV();
#BRANDING();
It may be opinion, but in my mind rarely should selectors require more than a single level of nesting to get the specificity needed in a well structured html page. One set of exceptions are sibling relationships, where sometimes a complex set of nesting and sibling relationships are needed to select the elements.
Of course, you have to be aware that, for example, .copyright is defined in #FOOTER() but it is outputting a selector that is not necessarily constrained to that area. If you as the designer know that the copyright appears no where else, okay. If not, then subsuming it under #footer will be important.