What is the meaning of nesting in Less programming
Nesting in Less programming means “clustering of statements inside other statements and so it forms a group of related code.” Simply when we add a code snippet and add another code inside that code snippet is simply nesting. We always write CSS code like shown below:

#main-menu {
  width: 100%;
  background: orange;
}
#main-menu li {
  float: left;
  margin-right: 10px;
}
#main-menu li a {
  font-size: 16px;
  color: black;
  padding-left: 5px;
}

Very usual CSS code, but the problem here is that we are repeating our #main-menu selector again and again. We also discussed elimination of repetition in css in earlier lesson you may have a look first if you have not been there before. So, typing #main-menu again and again makes our life hell and consumes a lot of time. How to cut this out?

Simple, in Less we can use nesting which simply means we can put our code snippet inside their parents. For example in our above example our parent is #main-menu while li and a tag are children. Hence, we can simply put these children inside #main-menu parent and so our code becomes like shown below:

#main-menu {
  width: 100%;
  background: orange;
  li {
  float: left;
  margin-right: 10px;
  a {
  font-size: 16px;
  color: black;
  padding-left: 5px;
  {
  }
}

Just figure out how we did? We just started from parent selector which is #main-menu here, we just written that selector and opened and closed curly braces. Thus all our code will reside inside this parent because all data is related to only this single parent. Then we written styles for #main-menu, once we finished we went towards first child of #main-menu which is li in this example. Here we just added li below the #main-menu styles and then opened and closed curly braces for li tag, as li becomes parent now.

So, we will write styles for li selector and then will move to a selector in same way as we did for li. As a selector does not have any child we simply styled a selector and closed our curly brace. Let suppose we have a span inside a selector, then what? Yes, we will put that span just before a selector’s styles and will style that span selector there. That’s a lot simple and saves a lot of time and also makes our code more readable. Have a look below, our code looks like shown below after adding span code:

#main-menu {
  width: 100%;
  background: orange;
  li {
  float: left;
  margin-right: 10px;
  a {
  font-size: 16px;
  color: black;
  padding-left: 5px;
  span {
  color: green;
  }
  {
  }
}

So we just followed the same process and so added span inside a selector as span is child of a selector.

Using nesting effectively
Nesting is very handy when used with care, care here means that you should not nest all your children selector in single parent selector. Because it may become a long chain like shown below:

#main-menu > ul > li > a > span > .other-span etc …

It’s bad practice, always try to minimize your selector chain so that your code stays always readable and understandable to any one who reads.

I generally suggest maximum chain of four selectors and not more than four selectors at all. While normally my selector chain remains three and four in very rare cases which is a good practice.