Qualified selectors

[laustdeleuran]

README.md, line 445

I totally agree with this! But I think it's important to highlight that people should avoid nesting, as it qualifies their selectors, and eventually ruins the idea of OOCSS/BEM - to control the cascade. Some nesting is unavoidable / unpractical, so I'd suggest that:

• Avoid all nesting, unless:
  • You're using pseudo-classes, like `:hover``
  • You're targeting pseudo-elements, like :before
  • You're using a Modifier

Example:

// Bad
.block {
    .block__element {}
    .block__element:hover {}
}

 // Good
.block {}
.block__element {}
.block__another-element {
    &:hover {}
}
.block--modifier {
    .block__element {}
}

[laustdeleuran]

Harry Roberts says a couple of good things about specificity:

Do not nest selectors unnecessarily. If .header-nav {} will work, never use .header .header-nav {}; to do so will literally double the specificity of the selector without any benefit.

[...]

One thing I believe, as a very, very general rule of thumb, is that as sites get bigger, selectors should get shorter.

Another great read by him is Code smells in CSS