Hacker News Reader

Nesting a maximum of three levels deep is generally good practice, but don't let that stop you from using parent references (&). This doesn't create a longer CSS selector, even though it's technically nested deeper in the SASS.

In case what I'm saying makes no sense: http://codepen.io/seraphzz/pen/ByEcx

View on HN

Nesting should be as long as it needs to be provided the structure is semantic and not html tags.

Yes, but also while keeping in mind best practices, for speed of rendering in browsers:

https://developers.google.com/speed/docs/best-practices/rend...

See Github's slide deck on CSS performance, and what they gained by being smart about refactoring, and how they use selectors:

https://speakerdeck.com/jonrohan/githubs-css-performance

html based diffs might be a special case, but the report is very interesting, thanks for the link.

Not sure to get what you mean. Could you explain a bit more?

say you were building an accordion, you might want .adn { .adn-header {} .adn-tab {} }

instead of the below which is just recreating the dom. This allows you to meaningfully target the elements you want instead of just blindly applying styles everywhere.

div { a {} div {} }

Reply on news.ycombinator.com