go BEM ?

[Plou]

I think we should go towards the BEM naming system

/* Plain CSS */
.article {
  font-size: 16px;
}

.article__title {
  font-size: 24px;
}

/* Using preprocessor */
.article {
  font-size: 16px;

  &__title {
    font-size: 24px;
  }
}

[Gregcop1]

Don't forget to mention a real example ;)

.news-item__header--active:hover { ... }

Without preprocessor, BEM is pain in the ass but with good preprocessor habits, I think it could be great

[Plou]

If the BEM is choosed, we'll have to look into scss-lint NestingDepth :

.list {
  &-item {
    &-link {
      &:hover { text-decoration: none; }
    }
  }
}

nesting depth is calculated as 4

.list-item-link:hover {
  text-decoration: none;
}

[Gregcop1]

it's not a problem for them :)