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 href="#">Hello World</a>
</div>
<div class="content">
<p></p>
<ul>
<li>...</li>
</ul>
</div>
<div class...