BEM+

BEM+.markdown

BEM+

Forked from Dan Tello's Pen BEM+.

A Pen by Ilya Rogov on CodePen.

License.

index.html

<!-- Such classes. Much Redundant. So button. Wow.

  <button class="button button_green button_rounded button_large">
    Buttin
  </button> 

-->

<h2>Individual Modifiers</h2>
<!-- Less Redudant, still flexible -->
<button class="button">Button</button>

<button class="button _green">Green</button>

<button class="button _rounded">Rounded</button>

<button class="button _green _rounded _large">Multi-class</button>

<button class="button overrides _disable" disabled>Override Class</button>

<h2>Saved Variations</h2>
<!-- The one class wonder! -->
<button class="button_save">Save</button>
<button class="button_delete">Delete</button>

style.stylus

/* 
  Declare all styles using placeholder selectors using the same old BEM syntax we all know and love.
*/

$button {
  background: #45beff;
  border: none;
  padding: 1em 2em;
  font-size: 16px;
  
  &:hover {
    opacity: 0.75;
  }
}

$button_green {
  background: #3efa95;
}

$button_red {
  background: #ff3a6a;
}


$button_large {
  font-size:20px;
}

$button_rounded {
  border-radius: 10px;
}

/* 
  Assemble our button, exposing modifiers we plan on using in our markup by extending placeholder selectors 
*/

.button {
    @extend $button;
    
    /* 
       Prefixing modifiers with '_', and only decalring them within the scope of what they are modifying ensures that they'll never cause a conflict
    */
  
    &._green {
        @extend $button_green;
    }
  
    $button_red {
      background: #ff3a6a;
    }
   
    &._large {
        @extend $button_large;
    }
   
    &._rounded {
        @extend $button_rounded;
    }
}

/*
  Save even more clutter by saving commonly used modifier combinations as new modifier class
*/

.button_save {
  @extend $button;
  @extend $button_large;
  @extend $button_rounded;
  @extend $button_green;
}

.button_delete {
  @extend $button;
  @extend $button_large;
  @extend $button_rounded;
  @extend $button_red;
}

/*
  If you really need to override something, (like the changing opacity on hover), you could create override rules like so:
*/

.overrides {
  &._disable {
    opacity: 0.25;
  }
}

// DEMO STYLES
body {
  font-family: sans-serif;
}