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...