Don’t deeply nest your SASS or LESS By Chris Johnson

CSS preprocessors like SASS and LESS are fantastic tools for helping you write CSS more efficiently. However, one bad thing they enable (and often encourage) is writing deeply nested rules like this:

header { width: 90%; nav { background: #000; ul { list-style: none; li { float: left; a { color: #fff; } } } } }

I’ve written code just like what you see above, and I’ve come to regret it every time. Deeply nested code is tough to read and it tightly ties your CSS styles to the HTML markup of the page. Ultimately, that means your styles will be hard to maintain and nearly impossible to reuse across your site. For instance, if we move the nav element out of the header and into the footer, the nav will be completely unstyled until we change the CSS.

This is how I would rewrite the above code:

.header { width: 90%; } .nav { background: #000; } .nav-list { list-style: none; li { float: left; a { color: #fff; } } }

Instead of relying on tag selectors like header and nav , I use classes that could be used anywhere on a page. The .nav selector isn’t nested inside the header tag, so I could move the nav element to another part of the page and these styles would still work.