[nroman]

If you do in SASS

  .Foo {
    a {
      /* stuff */
    }
  }

It translates into:

  .Foo a { /* stuff */ }

CSS is evaluated right to left, so this means every time an <a> is encountered in the page it has to at its parent chain to see if any has class Foo. This can cause performance issues especially for really large pages.

That said, for most pages it won't make a noticeable difference so it's kind of up to you to decide if you care.

[eriktrautman]

What's the more performant/"proper" way to narrowly target CSS in that situation? Just tacking classes directly on the links (e.g. `<a href="#" class="foo-link">` starts to get very cluttered very fast if you want the benefits of deeper nesting, targeting and namespacing (e.g. `<a href="#" class="foo-bar-baz-link">`. Is it best to simply try to avoid nesting of styles altogether and keep namespaces as flat as possible?