Nesting depth warning on BEM structure

[marcoturi]

The above code will throw a warning (nesting should not be greater than 1) from sass lint:

.example {
  top: 43px;
  &__section { // <-- this line
    width: 100%;
  }
}

[KittyGiraudel]

Yep. It's expected. :)

[marcoturi]

But it's not a nesting selector. What you suggest for a project using BEM, to get rid of the warning correctly? Disable the sass lint rule ? Or use a mixin instead of & ? Thank you for your fast response :)

[KittyGiraudel]

It definitely is a nested selector. It might not generate a compound selector but it still generates a selector nevertheless. I’d recommend you don’t use selector nesting entirely, but that’s really up to you.

[marcoturi]

if I avoid the the syntax of the first post, following your advice to "....have the base name repeated. " (from here). For example:

.example {
 top: 43px;
}

.example__section { //<-- this line again
  width: 100%;
}

I get another warning from sass-lint about the regexp for the "__". Do I miss something ?

[KittyGiraudel]

Okay, that might be a bug then. :)
Are you using the configuration from this repo?

[KittyGiraudel]

Just updated the configuration for SelectorFormat, care to try it?

[marcoturi]

No warnings now. Thank you!

[KittyGiraudel]

Lovely. :)