5 ms·
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 CS
by freshyill 13y ago
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 http://codepen.io/seraphzz/pen/ByEcx
- smrtinsert 13y agoNesting should be as long as it needs to be provided the structure is semantic and not html tags.
- program247365 13y agoYes, but also while keeping in mind best practices, for speed of rendering in browsers: https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors 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 https://speakerdeck.com/jonrohan/githubs-css-performance
- smrtinsert 13y agohtml based diffs might be a special case, but the report is very interesting, thanks for the link.
- grosbisou 13y agoNot sure to get what you mean. Could you explain a bit more?
- smrtinsert 13y agosay 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 {} }