My Sass and CSS Best Practices
Modularization, Nesting, Variables, Mixins, Specificity, Etc
If you nest all your #Sass selectors like you do HTML, you're doing it wrong. #IndentThem #DontNestThem
— Josh Broton (@joshbroton) July 6, 2013
In the week since I tweeted this, I’ve been asked about what I meant by it a half-dozen times. As with any dev tool, Sass’s power can be both a boost to productivity and a source of scorn because of misuse. I’ve even been told by a couple of people that they don’t allow their staff to use Sass/Less/CSS preprocessors because of the horrible unmaintainable CSS that it generates. Looking back at the Sass I wrote when I first started using it vs the Sass that I write now, I’m 100% certain that the problems these dev shops have lie 100% with the way the tools are being used, not the tools themselves.
Let’s take a look at some of the lessons I’ve learned and methods I use to write Sass that compiles to clean CSS.
- Indentation vs. Nesting
- Modularization
- Variables
- Mixins
- Classes vs. IDs