Over the years, developers have had to frequently write code that duplicates all or part of a selector—a perfect example is styling lists or navigation items. It's a real pain to have to write so much extra code; instead we can use nesting principles to help remove some of this code. We've covered a number of techniques around nesting in PostCSS throughout this chapter, so let's take a moment to review what we've learned.
We kicked off with an introduction to nesting, to help bring us up to speed, before launching into using the postcss-nesting
plugin to create nested styles within PostCSS. We then moved on to creating our nesting demo. We began with preparing a plain vanilla CSS version, before taking a look at converting to existing processors such as SASS.
Moving on, we then took a look at converting our code using the postcss-nesting
plugin, before exploring some of the pitfalls that are associated with nesting, and some of the tips and tricks we can use to reduce CSS specificity...