As a front-end developer, my job is not only to create usable and beautiful websites, but also to design maintainable and reusable code. If you’ve ever worked with SASS or a team that uses a preprocessor, you’ve probably come across nesting in all of it’s beautiful, ugly glory. It’s a way to quickly scope for page specific styles or grab selectors that may not have classes assigned.
To help maintain nesting, the Inception Rule has been the de facto answer to the problem. In this post, we’ll look at how the rule is broken and how we can fix it.
Case study example
Here is some real code I found on a recent project with the class names altered. It highlights the kind of problems I want to illustrate and the kind of poor nesting that results from the Inception Rule.
Some crappy SCSS
Evaluates to crappy CSS
There’s several problems with the code listed above. Let’s start with the amount of nesting taking place within the .cat-product object. For all but one or two instances, this bit of code follows the Inception Rule by going no more than four levels deep. The rule doesn’t protect us from runaway code and doesn’t provide a framework for legibility or maintainability. Instead, we get large blocks of code we’ll later have to untangle or explain to teammates.
Tie me up, untie me
Instead, we should have the “Inception-wasn’t-that-clever-of-a-movie-rule”. Anything more than a single level deep really just causes more pain and suffering, as in “My brain hurts from having Christopher Nolan explain half of his damn movie to me” pain. There’s a kind of sadistic joy involved when you force your audience to pay attention to your character explain five or six, tangled stories and scenarios. Untangling deeply nested SASS is bit like untangling Inception, you need graphs, diagrams, a lengthy explanation to get through it.
Warning: Christopher Nolan actually makes amazing movies and I wish I had just a sliver of his talent. I would be honored to bring him his coffee on set.
Me code pretty one day
The second issue is that the code uses almost no classes on the elements. Obviously, this is some kind of menu system but we’re left with rules that apply to all anchor tags or all list items. Say we want to expand on this menu system by creating child elements with their own set of rules. Our code now requires us to nest even deeper to create our styles.
Warning: Nesting is for rats and birds, not your style sheets
Let’s take our example and clean up some of the rules with new classes and some vanilla CSS. I’ll start by creating a class name for the menu. Let’s go with .cat-menu. Hipsters and grandmas give 10 out of 10 cat paws for my naming conventions.
We’ve now made it far more clear what exactly is going on with our menu using vanilla CSS and some BEM. It’s a menu about cats, with list item styles and classes to toggle states. I have to now spent 0 hours explaining the code to my teammates. Meeting adjourned!
Mix it, mix it real good
SASS offers so much more than just nesting, yet most people decide to use the nesting feature exclusively. SASS’s mixins and variables allow you to create excellent reusable snippets of code.
I use these mixins across all projects in addition to the ones provided by Compass. However, mixins have their limits. Don’t use mixins in an attempt to reuse code or create auto-magic CSS. Mixins should be used to rewrite small snippets, like a clearfix or vendor prefixes, not entire styles.
How not to use a mixin
Danger: If you create abominations like the code I found above, you will be cursed with The Keyboard Cat playing on loop. Forever.
Variables provide an excellent way to reuse even more granular bits of code for consistency and clarity, including:
A lot of the ways I’ve structured my variables has been shamelessly stolen from Bootstrap and the Skeleton front-end frameworks, but I think they illustrate the kinds of things you can reuse throughout your style sheets.
Front end development has a lot of challenges and working with teams makes the job even more challenging. Why create more problems by nesting? Do your future-self and your teammates a favor by cutting out nesting. Nesting may seem like a way to quickly write some CSS, but quickly adds more time later to your work. Also, I stand by my word that Inception kind of sucked.