In OOCSS and Preprocessors in a Tree, K-I-S-S-I-N-G, Nicole Sullivan explains how to write more modular CSS with SaSS.
- Some of Nicole’s clients had 100,000 lines of CSS. Nicole helps them whittle it down to 1,500 lines.
- You only ever learn about something by doing it wrong the first time. Experience in doing things incorrectly can show you
- It’s not OOCSS or SaSS. That’s the wrong question, they’re quite complementary.
OOCSS and SaSS
- OOCSS is a way of writing CSS that avoids duplicating CSS
- OOCSS is tiny dry awesome CSS, while SaSS is dry awesome SCSS
- OOCSS uses multiple classes to simulate inheritance, while SaSS handles it in CSS using @extend
- OOCSS doesn’t have a good mechanism for mixins, tends to duplicate the code, while SaSS uses @include to simulate mixins
- OOCSS is what you want to say, while SaSS is an alternate way of saying it.
Getting Started with SaSS
- Sometimes plain CSS solutions are painful. SaSS can help. For example, there are multiple clearfix methods and sometimes certain clearfix solutions work for a module and other times a different solution is more appropriate
- Nesting is a good intro to SaSS
- It’s tempting to make the SaSS nesting match the html. But that results in hefty overly-specific CSS.
- Nesting shows (an approximation of) specificity
- Be careful with nesting – it can generate a lot of overly-specific styles. Easy to write in SaSS, but easy != good.
- Keep an eye on the output file and make sure things aren’t getting unruly.
- The Inception Rule – Never go more than three levels deep
- How to Optimize Mixins – Use them when you wouldn’t want the class in the html (eg a border radius) and use them for small number of properties
- Building message boxes (error, information, success, other)
- Avpods property value pair duplication
- Causes selector duplication
- best for simple selectors
- messy with many nested subsides
- messy output when many classes extend another class
- OOCSS instead uses multiple classes in the HTML instead of using CSS.
- It’s OK to use a combination of a use @extend if a relationship is implied. @include if one is not.
- Nicole doesn’t see a good reason to use multi-class extensions. It avoids confusion and reduces the output.
When you want to abstract something, but don’t need the class itself in the stylesheet. Similar to @include, but doesn’t create a class for the ‘parent’ class.
- Make SaSS play nicely with Modernizr
- Nicole removed Modernizr and instead uses * and _ hacks. This keeps IE code together with normal code.
- Not everyone wants all of the code. Author in a way so that the people who want grids will only get the CSS.
- Try SaSS, it’s a super useful tool
- Relentlessly focus on the output, make sure both SaSS and CSS make sense
- Use frameworks when appropriate, but only use the stuff you need.