Chapter 3. Nesting Rules

If you have spent any time developing with preprocessors, then you will likely have come across nested properties—instead of writing multiple style rules with repeated references to the same elements, we can use nesting to create concise style rules that compile to valid CSS.

In this chapter, we'll delve into using the power of nesting, show you how you can transition from using preprocessors such as SASS or Less, and explore some of the tricks we can use that are not available with preprocessors such as SASS:

Exploring the use of BEM (Block, Element, Modifier) or standard nesting
Creating nested rules and BEM equivalents using existing preprocessors
Transitioning to using PostCSS plugins
Understanding the pitfalls of nesting and how we can improve our code

Let's make a start…!

Introducing nesting

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 using a GUI application or via the command line, it results in these styles:

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

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

The great thing about this code is that we've not tried to cram in every single rule that applies to the same parent selector, or a descendant; this is something we should consider when working with nesting.

Note

Notice how, in our SASS example, the nesting was at the end of the code? It's considered good practice to include nested statements at the end, before the closing bracket.

Some developers counsel against using nesting though, as it causes real issues for elements that have been styled in specific contexts; it becomes harder to change the code if we need to change the style. We will explore more of the reasons why nesting is fraught with risks later in this chapter.

Leaving aside the risks of nesting for the moment, we can use the same basic principle of nesting when using PostCSS—for this, we need to use the postcss-nesting plugin by Jonathan Neal, which is available from https://github.com/jonathantneal/postcss-nesting. To give you a flavor of what nesting looks like in PostCSS, take a look at this screenshot—this is an online playground provided by the author for trialing nested statements, where we can see the results automatically on the right:

The key line is on the left, fifth from the bottom: the postcss-nesting plugin uses @nest & as the placeholder for nesting code.

To help illustrate how the postcss-nesting plugin works, we will use it to create a somewhat unique navigation system. Our navigation will use a mix of jQuery and CSS to style and flip some demo pages, with the animation effects provided by CSS3 styling. Intrigued? Let's dive in and take a look.

Previous Chapter

Summary

Next Chapter

Navigating through pages

Table of Contents for Mastering PostCSS for Web Design

Chapter 3. Nesting Rules

Introducing nesting

Note

Table of Contents for
Mastering PostCSS for Web Design