4 ms·

Saw this earlier today: https://github.com/rstacruz/rscss https://github.com/rstacruz/rscss

• grvcoelho 11y ago
  It uses some examples like .search-form { > .submit {} } which generates this: .search-form > .submit {} which can lead to some performance issues :) That's why I suggest the non-nesting approach
  • johnhenry 11y ago
    Could you explain the performance issue and provide (or point to) an example showing how to do this correctly?
    • grvcoelho 11y ago
      see above :)
      • johnhenry 11y ago
        I see the issue of specificity, but instead of writing this .search-form { > .submit {} }, wouldn't you write this as .search-form { .submit {} }, and this would compile to .search-form .submit {}? I don't see the issue with nesting itself -- it still seems like the choices of the programmer are at fault in this case?
        • grvcoelho 11y ago
          The problem is not with the ">", but with the specificity in general! The selector ".search-form .submit" has 2 levels if specificity. What I suggest is using 1 level of specificity like ".search-form__submit" Nesting is guilty here because of the ease it is to use it wrongly and create selectors with high levels of specificity
          • johnhenry 11y ago
            Finally, I understand! Thanks!
            • grvcoelho 11y ago
              No probs ;)
  • taco_emoji 11y ago
    I'm confused... the performance issue is with the > selector, right? What does nesting have to do with that?
    • grvcoelho 11y ago
      http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left/5813672#5813672 http://stackoverflow.com/questions/5797014/why-do-browsers-m... tl;dr browsers read css property right-to-left. the more specificity a selector has, the more DOM lookup the browser needs to do.