smacss + sass + bem.md

SMACSS + Sass + BEM

SMACSS

Scalable and
Modular
Architecture for
C
S
S

base/
  _elements.css
layout/
  _grid.css
  _header.css
  _sidebar.css
  _main.css
modules/
  _logo.css
  _button.css
  _progress_bar.css
state/
  _global.css

SMACSS + Sass

base/
layout/
modules/
state/
vendor/
_config.sass
_fonts.sass
_global_mixins.sass
application.sass

Example application.sass

BEM

Block Element Modifier

.block__element--modifier {}

<block class="modifier">
  <element />
</block>

BEM       SMACSS
Block     Module
Element   Subcomponent
Modifier  Submodule

Before BEM

A SMACSS module: .foo

<div class="foo">
  <a class="close-button">
</div>

<div class="foo foo-large">
  <a class="close-button">
</div>

.foo {}                       // 1
.foo .close-button {}         // 2
.foo.foo-large {}             // 2
.foo.is-active {}             // 2
.foo.foo-large.is-active {}   // 3

BEM style

<div class="foo">
  <a class="foo__close-button">
</div>

<div class="foo--large">
  <a class="foo__close-button">
</div>

.foo {}                     // 1
.foo__close-button {}       // 1
.foo--large {               // 1
  @extend .foo
}
.foo--is-active {}          // 1
.foo--large--is-active {}   // 1

but there is not a better way to maintain the block-class in the html code? and to add the modifier-class to the root class in the html code? would also minimize the css code something.

<div class="foo foo--large">
  <a class="foo__close-button">
</div>