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…!