O'Reilly logo

Mastering PostCSS for Web Design by Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Exploring the pitfalls of nesting

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:

Exploring the pitfalls of nesting

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required