The concept of nesting is nothing new when using processors such as Less CSS or SASS; it's a useful technique to help reduce the amount of code we need to write, and to organize code in a more human-readable format.

The flipside of the coin is that it is frequently abused—when using processors for the first time, many developers fall into the trap of thinking that everything should be nested. One can get away with it if the code is very simple; it is more likely to result in fragile code that is difficult to read and easily broken with simple changes to one or more styles in the code.

If nesting is done correctly, then it can be very effective; it helps avoid the need to repeat parent selectors, and allows us to group together rules that apply to the same selector, together. To see what is meant by this, take a look at this simple example for SASS:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

If this is compiled...