It has to be said that although nesting is a simple technique to understand, it can be difficult to get right, as shown in our SASS version of the demo:
The issues we have here are twofold—the multiple levels of nesting result in a high level of code specificity; if we wanted to change the styling for
.nav-panel ul li (the compiled version of line
125), it would likely break the appearance of our front end code. To see what I mean, let's take an example HTML page that any developer might create:
<body> <div class="container"> <div class="content"> <div class="articles"> <div class="post"> <div class="title"> <h1><a ...