search

dummy-team / dummy

Solid foundations for modern front-end development - Pug, Sass, javascript & automation
http://dummy-team.github.io/dummy/
GNU General Public License v3.0
7 stars 5 forks source link

go BEM ? #88

Open Plou opened 8 years ago

Plou commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

it's not a problem for them :)