Skip to content

Instantly share code, notes, and snippets.

@dani-z
Forked from bensmithett/smacss + sass + bem.md
Created July 9, 2013 16:46
Show Gist options
  • Save dani-z/5959022 to your computer and use it in GitHub Desktop.
Save dani-z/5959022 to your computer and use it in GitHub Desktop.

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
@webdesignberlin
Copy link

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment