From an architectural perspective, nesting CSS selectors might make more sense in larger teams where different developers work on separate parts of the codebase, potentially preventing unintentional CSS overrides. However, nesting can also create problems with specificity. Even at a basic level, you might encounter something like this:

.some-section {
  /* Some styles with a specificity of 10 */
  h1 {} /* Specificity of 11 */
  p {
    /* Specificity of 11 */
    .img {} /* Specificity of 21 */
  }
  .another-element {} /* Specificity of 20 */
}

A problem arises if you try to style, for example, the above image by adding a new CSS class of highlight and try to style it with something like .some-other-section .highlight {}. However, the specificity of 20 won't override styles with the specificity of 21.

In contrast, adopting a BEM-like approach with zero CSS nesting (just visual nesting) would look like this:

.some-section {
  /* Some styles with a specificity of 10 */
  &__title {} /* Specificity of 10 */
  &__text {} /* Specificity of 10 */
  &__img {
    /* Specificity of 10 */
    &--highlight {} /* Specificity of 10 */
  }
  &__another-element {} /* Specificity of 10 */
}

Furthermore, with modern frameworks, CSS is scoped to the component, so you don't have to worry about global styles overriding your component styles. This allows you to easily follow the KISS principle with no nesting and simple names.