From fcfb408900d8a1834929af05351c09bc38130566 Mon Sep 17 00:00:00 2001
From: Pixelastic <tim@pixelastic.com>
Date: Mon, 9 Nov 2015 16:47:58 +0100
Subject: [PATCH] fix(bem): Make scss mixins actually follow BEM

The mixins and internal variable where misnamed. We use the BEM naming
with the following pattern: `.ais-block--element__modifier`.

Mixins where usin `component` instead of `block` and where swapping
`element` and `modifier`. I've reverted to something more readable.
---
 css/_base.scss                                | 20 ++++----
 css/default/_hierarchical-menu.scss           | 24 +++++-----
 css/default/_hits.scss                        |  6 +--
 css/default/_index-selector.scss              |  4 +-
 css/default/_menu.scss                        | 18 +++----
 css/default/_pagination.scss                  | 18 +++----
 css/default/_price-ranges.scss                | 28 +++++------
 css/default/_range-slider.scss                | 32 ++++++-------
 css/default/_refinement-list.scss             | 20 ++++----
 css/default/_search-box.scss                  |  8 ++--
 css/default/_stats.scss                       | 10 ++--
 css/default/_toggle.scss                      | 20 ++++----
 docs/examples/airbnb/scss/_base.scss          | 21 ++++----
 .../airbnb/scss/_hierarchical-menu.scss       | 22 ++++-----
 docs/examples/airbnb/scss/_hits.scss          |  6 +--
 .../examples/airbnb/scss/_index-selector.scss |  4 +-
 docs/examples/airbnb/scss/_menu.scss          | 18 +++----
 docs/examples/airbnb/scss/_pagination.scss    | 18 +++----
 docs/examples/airbnb/scss/_price-ranges.scss  | 18 +++----
 docs/examples/airbnb/scss/_range-slider.scss  | 42 ++++++++--------
 .../airbnb/scss/_refinement-list.scss         | 20 ++++----
 docs/examples/airbnb/scss/_search-box.scss    |  6 +--
 docs/examples/airbnb/scss/_stats.scss         | 10 ++--
 docs/examples/airbnb/scss/_toggle.scss        | 20 ++++----
 docs/examples/youtube/scss/_base.scss         | 21 ++++----
 .../youtube/scss/_hierarchical-menu.scss      | 22 ++++-----
 docs/examples/youtube/scss/_hits.scss         |  6 +--
 .../youtube/scss/_index-selector.scss         |  4 +-
 docs/examples/youtube/scss/_menu.scss         | 18 +++----
 docs/examples/youtube/scss/_pagination.scss   | 18 +++----
 docs/examples/youtube/scss/_price-ranges.scss | 18 +++----
 docs/examples/youtube/scss/_range-slider.scss | 48 +++++++++----------
 .../youtube/scss/_refinement-list.scss        | 20 ++++----
 docs/examples/youtube/scss/_search-box.scss   |  6 +--
 docs/examples/youtube/scss/_stats.scss        | 10 ++--
 docs/examples/youtube/scss/_toggle.scss       | 20 ++++----
 36 files changed, 313 insertions(+), 311 deletions(-)

diff --git a/css/_base.scss b/css/_base.scss
index 081df40730..148b39297b 100644
--- a/css/_base.scss
+++ b/css/_base.scss
@@ -1,26 +1,26 @@
-@mixin component($component) {
-  .ais-#{$component} {
+@mixin block($block) {
+  .ais-#{$block} {
     @content
   }
 }
 
-@mixin modifier($modifier) {
-  &--#{$modifier} {
+@mixin element($element) {
+  &--#{$element} {
     @content
   }
 }
 
-@mixin element($element) {
-  &__#{$element} {
+@mixin modifier($modifier) {
+  &__#{$modifier} {
     @content
   }
 }
 
-@mixin bem($component, $modifier, $element: "") {
-  @include component($component) {
-    @include modifier($modifier) {
+@mixin bem($block, $element, $modifier: "") {
+  @include block($block) {
+    @include element($element) {
       @if $element != "" {
-        @include element($element) {
+        @include modifier($modifier) {
           @content;
         }
       } @else {
diff --git a/css/default/_hierarchical-menu.scss b/css/default/_hierarchical-menu.scss
index b7e5e7333c..e745c1952e 100644
--- a/css/default/_hierarchical-menu.scss
+++ b/css/default/_hierarchical-menu.scss
@@ -1,42 +1,42 @@
 @import "../base";
 @import "variables";
 
-@include component(hierarchical-menu) {
-  @include modifier(header) {
+@include block(hierarchical-menu) {
+  @include element(header) {
     /* widget header */
   }
-  @include modifier(body) {
+  @include element(body) {
     /* widget body */
   }
-  @include modifier(list) {
+  @include element(list) {
     /* item list */
-    @include element(lvl0) {
+    @include modifier(lvl0) {
       /* item list level 0 */
     }
-    @include element(lvl1) {
+    @include modifier(lvl1) {
       /* item list level 1 */
       margin-left: 10px;
     }
-    @include element(lvl2) {
+    @include modifier(lvl2) {
       /* item list level 0 */
       margin-left: 10px;
     }
   }
 
-  @include modifier(item) {
+  @include element(item) {
     /* list item */
-    @include element(active) {
+    @include modifier(active) {
       /* active list item */
     }
   }
 
-  @include modifier(link) {
+  @include element(link) {
     /* item link */
   }
-  @include modifier(count) {
+  @include element(count) {
     /* item count */
   }
-  @include modifier(footer) {
+  @include element(footer) {
     /* widget footer */
   }
 }
diff --git a/css/default/_hits.scss b/css/default/_hits.scss
index 10d018d989..a473853de3 100644
--- a/css/default/_hits.scss
+++ b/css/default/_hits.scss
@@ -1,11 +1,11 @@
 @import "../base";
 @import "variables";
 
-@include component(hits) {
-  @include element(empty) {
+@include block(hits) {
+  @include modifier(empty) {
     /* empty container */
   }
-  @include modifier(item) {
+  @include element(item) {
     /* hit item */
   }
 }
diff --git a/css/default/_index-selector.scss b/css/default/_index-selector.scss
index 1a97782b2f..98bd01086c 100644
--- a/css/default/_index-selector.scss
+++ b/css/default/_index-selector.scss
@@ -1,8 +1,8 @@
 @import "../base";
 @import "variables";
 
-@include component(index-selector) {
-  @include modifier(item) {
+@include block(index-selector) {
+  @include element(item) {
     /* selector item */
   }
 }
diff --git a/css/default/_menu.scss b/css/default/_menu.scss
index 450f10d41e..9bb8867bc7 100644
--- a/css/default/_menu.scss
+++ b/css/default/_menu.scss
@@ -1,29 +1,29 @@
 @import "../base";
 @import "variables";
 
-@include component(menu) {
-  @include modifier(header) {
+@include block(menu) {
+  @include element(header) {
     /* widget header */
   }
-  @include modifier(body) {
+  @include element(body) {
     /* widget body */
   }
-  @include modifier(list) {
+  @include element(list) {
     /* item list */
   }
-  @include modifier(item) {
+  @include element(item) {
     /* list item */
-    @include element(active) {
+    @include modifier(active) {
       /* active list item */
     }
   }
-  @include modifier(link) {
+  @include element(link) {
     /* item link */
   }
-  @include modifier(count) {
+  @include element(count) {
     /* item count */
   }
-  @include modifier(footer) {
+  @include element(footer) {
     /* widget footer */
   }
 }
diff --git a/css/default/_pagination.scss b/css/default/_pagination.scss
index bd39de1d00..5bb97a5023 100644
--- a/css/default/_pagination.scss
+++ b/css/default/_pagination.scss
@@ -1,30 +1,30 @@
 @import "../base";
 @import "variables";
 
-@include component(pagination) {
-  @include modifier(item) {
+@include block(pagination) {
+  @include element(item) {
     /* pagination item */
-    @include element(disabled) {
+    @include modifier(disabled) {
       /* disabled pagination item */
       visibility: hidden;
     }
   }
-  @include modifier(item-first) {
+  @include element(item-first) {
     /* first pagination item */
   }
-  @include modifier(item-previous) {
+  @include element(item-previous) {
     /* previous pagination item */
   }
-  @include modifier(item-page) {
+  @include element(item-page) {
     /* page */
-    @include element(active) {
+    @include modifier(active) {
       /* active page */
     }
   }
-  @include modifier(item-next) {
+  @include element(item-next) {
     /* next pagination item */
   }
-  @include modifier(item-last) {
+  @include element(item-last) {
     /* last pagination item */
   }
 }
diff --git a/css/default/_price-ranges.scss b/css/default/_price-ranges.scss
index e698faf3f3..84f92d323e 100644
--- a/css/default/_price-ranges.scss
+++ b/css/default/_price-ranges.scss
@@ -1,45 +1,45 @@
 @import "../base";
 @import "variables";
 
-@include component(price-ranges) {
-  @include modifier(header) {
+@include block(price-ranges) {
+  @include element(header) {
     /* widget header */
   }
-  @include modifier(body) {
+  @include element(body) {
     /* widget body */
   }
-  @include modifier(footer) {
+  @include element(footer) {
     /* widget footer */
   }
-  @include modifier(list) {
+  @include element(list) {
     /* item list */
   }
-  @include modifier(item) {
+  @include element(item) {
     /* list item */
-    @include element(active) {
+    @include modifier(active) {
       /* active list item */
     }
   }
 
-  @include modifier(link) {
+  @include element(link) {
     /* item link */
   }
-  @include modifier(form) {
+  @include element(form) {
     /* custom form */
   }
-  @include modifier(label) {
+  @include element(label) {
     /* custom form label */
   }
-  @include modifier(currency) {
+  @include element(currency) {
     /* currency */
   }
-  @include modifier(input) {
+  @include element(input) {
     /* custom form input */
   }
-  @include modifier(separator) {
+  @include element(separator) {
     /* custom form separator */
   }
-  @include modifier(button) {
+  @include element(button) {
     /* custom form button */
   }
 }
diff --git a/css/default/_range-slider.scss b/css/default/_range-slider.scss
index defea3e7e8..c2aa67111d 100644
--- a/css/default/_range-slider.scss
+++ b/css/default/_range-slider.scss
@@ -8,8 +8,8 @@ $range-slider-marker-bg: #DDD;
 $range-slider-bar-color: $blue-light;
 $range-slider-handle-bg: $white;
 
-@include component(range-slider) {
-  @include modifier(target) {
+@include block(range-slider) {
+  @include element(target) {
     position: relative;
     direction: ltr;
     background: $range-slider-bg;
@@ -18,7 +18,7 @@ $range-slider-handle-bg: $white;
     margin-bottom: 4em;
   }
 
-  @include modifier(base) {
+  @include element(base) {
     width: 100%;
     height: 100%;
     position: relative;
@@ -29,7 +29,7 @@ $range-slider-handle-bg: $white;
     border-right: 2px solid $range-slider-marker-bg;
   }
 
-  @include modifier(origin) {
+  @include element(origin) {
     position: absolute;
     right: 0;
     top: 0;
@@ -37,15 +37,15 @@ $range-slider-handle-bg: $white;
     bottom: 0;
   }
 
-  @include modifier(connect) {
+  @include element(connect) {
     background: $range-slider-bar-color;
   }
 
-  @include modifier(background) {
+  @include element(background) {
     background: $range-slider-bg;
   }
 
-  @include modifier(handle) {
+  @include element(handle) {
     width: $range-slider-handle-size;
     height: $range-slider-handle-size;
     position: relative;
@@ -56,24 +56,24 @@ $range-slider-handle-bg: $white;
     cursor: pointer;
   }
 
-  @include modifier(handle-lower) {
+  @include element(handle-lower) {
     left: -($range-slider-handle-size / 2);
     bottom: ($range-slider-handle-size / 2 - $range-slider-target-height / 2);
   }
 
-  @include modifier(handle-upper) {
+  @include element(handle-upper) {
     right: $range-slider-handle-size / 2;
     bottom: ($range-slider-handle-size / 2 - $range-slider-target-height / 2);
   }
 
-  @include modifier(tooltip) {
+  @include element(tooltip) {
     position: absolute;
     background: $white;
     top: -2em;
     font-size: .8em;
   }
 
-  @include modifier(pips) {
+  @include element(pips) {
     box-sizing: border-box;
     position: absolute;
     height: 3em;
@@ -82,7 +82,7 @@ $range-slider-handle-bg: $white;
     width: 100%;
   }
 
-  @include modifier(value) {
+  @include element(value) {
     width: $range-slider-handle-size * 2;
     position: absolute;
     text-align: center;
@@ -90,25 +90,25 @@ $range-slider-handle-bg: $white;
     padding-top: 15px;
     font-size: .8em;
   }
-  @include modifier(value-sub) {
+  @include element(value-sub) {
     font-size: .8em;
     padding-top: 15px;
   }
 
-  @include modifier(marker) {
+  @include element(marker) {
     position: absolute;
     background: $range-slider-marker-bg;
     margin-left: -1px;
     width: 1px;
     height: 5px;
   }
-  @include modifier(marker-sub) {
+  @include element(marker-sub) {
     background: $range-slider-marker-bg;
     width: 2px;
     margin-left: -2px;
     height: 7px + $range-slider-target-height;
   }
-  @include modifier(marker-large) {
+  @include element(marker-large) {
     background: $range-slider-marker-bg;
     width: 2px;
     margin-left: -2px;
diff --git a/css/default/_refinement-list.scss b/css/default/_refinement-list.scss
index 738a111919..2014b6202d 100644
--- a/css/default/_refinement-list.scss
+++ b/css/default/_refinement-list.scss
@@ -1,32 +1,32 @@
 @import "../base";
 @import "variables";
 
-@include component(refinement-list) {
-  @include modifier(header) {
+@include block(refinement-list) {
+  @include element(header) {
     /* widget header */
   }
-  @include modifier(body) {
+  @include element(body) {
     /* wudget footer */
   }
-  @include modifier(list) {
+  @include element(list) {
     /* item list */
   }
-  @include modifier(item) {
+  @include element(item) {
     /* list item */
-    @include element(active) {
+    @include modifier(active) {
       /* active list item */
     }
   }
-  @include modifier(label) {
+  @include element(label) {
     /* item label */
   }
-  @include modifier(checkbox) {
+  @include element(checkbox) {
     /* item checkbox */
   }
-  @include modifier(count) {
+  @include element(count) {
     /* item count */
   }
-  @include modifier(footer) {
+  @include element(footer) {
     /* widget footer */
   }
 }
diff --git a/css/default/_search-box.scss b/css/default/_search-box.scss
index 937a13f878..5c485f1306 100644
--- a/css/default/_search-box.scss
+++ b/css/default/_search-box.scss
@@ -1,12 +1,12 @@
 @import "../base";
 @import "variables";
 
-@include component(search-box) {
-  @include modifier(input) {
+@include block(search-box) {
+  @include element(input) {
     /* search input */
   }
 
-  @include modifier(powered-by) {
+  @include element(powered-by) {
     font-size: .8em;
     text-align: right;
     margin-top: 2px;
@@ -15,7 +15,7 @@
   // Image replacement technique used:
   // http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
   //
-  @include modifier(powered-by-link) {
+  @include element(powered-by-link) {
     display: inline-block;
     width: 45px;
     height: 16px;
diff --git a/css/default/_stats.scss b/css/default/_stats.scss
index 3f058d21e7..fa86987ae6 100644
--- a/css/default/_stats.scss
+++ b/css/default/_stats.scss
@@ -1,17 +1,17 @@
 @import "../base";
 @import "variables";
 
-@include component(stats) {
-  @include modifier(header) {
+@include block(stats) {
+  @include element(header) {
     /* widget header */
   }
-  @include modifier(body) {
+  @include element(body) {
     /* widget body */
   }
-  @include modifier(time) {
+  @include element(time) {
     /* processing time */
   }
-  @include modifier(footer) {
+  @include element(footer) {
     /* widget footer */
   }
 }
diff --git a/css/default/_toggle.scss b/css/default/_toggle.scss
index 092bf2991c..9f3583afb4 100644
--- a/css/default/_toggle.scss
+++ b/css/default/_toggle.scss
@@ -1,32 +1,32 @@
 @import "../base";
 @import "variables";
 
-@include component(toggle) {
-  @include modifier(header) {
+@include block(toggle) {
+  @include element(header) {
     /* widget header */
   }
-  @include modifier(body) {
+  @include element(body) {
     /* wudget body */
   }
-  @include modifier(list) {
+  @include element(list) {
     /* item list */
   }
-  @include modifier(item) {
+  @include element(item) {
     /* list item */
-    @include element(active) {
+    @include modifier(active) {
       /* active list item */
     }
   }
-  @include modifier(label) {
+  @include element(label) {
     /* item label */
   }
-  @include modifier(checkbox) {
+  @include element(checkbox) {
     /* item checkbox */
   }
-  @include modifier(count) {
+  @include element(count) {
     /* item count */
   }
-  @include modifier(footer) {
+  @include element(footer) {
     /* widget footer */
   }
 }
diff --git a/docs/examples/airbnb/scss/_base.scss b/docs/examples/airbnb/scss/_base.scss
index 081df40730..844aa7ed4b 100644
--- a/docs/examples/airbnb/scss/_base.scss
+++ b/docs/examples/airbnb/scss/_base.scss
@@ -1,26 +1,26 @@
-@mixin component($component) {
-  .ais-#{$component} {
+@mixin block($block) {
+  .ais-#{$block} {
     @content
   }
 }
 
-@mixin modifier($modifier) {
-  &--#{$modifier} {
+@mixin element($element) {
+  &--#{$element} {
     @content
   }
 }
 
-@mixin element($element) {
-  &__#{$element} {
+@mixin modifier($modifier) {
+  &__#{$modifier} {
     @content
   }
 }
 
-@mixin bem($component, $modifier, $element: "") {
-  @include component($component) {
-    @include modifier($modifier) {
+@mixin bem($block, $element, $modifier: "") {
+  @include block($block) {
+    @include element($element) {
       @if $element != "" {
-        @include element($element) {
+        @include modifier($modifier) {
           @content;
         }
       } @else {
@@ -29,3 +29,4 @@
     }
   }
 }
+
diff --git a/docs/examples/airbnb/scss/_hierarchical-menu.scss b/docs/examples/airbnb/scss/_hierarchical-menu.scss
index 4b742baa8e..c2514815d5 100644
--- a/docs/examples/airbnb/scss/_hierarchical-menu.scss
+++ b/docs/examples/airbnb/scss/_hierarchical-menu.scss
@@ -1,19 +1,19 @@
 @import "base";
 @import "variables";
 
-@include component(hierarchical-menu) {
-  @include modifier(header);
-  @include modifier(body);
-  @include modifier(list) {
-    @include element(lvl0);
-    @include element(lvl1);
+@include block(hierarchical-menu) {
+  @include element(header);
+  @include element(body);
+  @include element(list) {
+    @include modifier(lvl0);
+    @include modifier(lvl1);
   }
 
-  @include modifier(item) {
-    @include element(active);
+  @include element(item) {
+    @include modifier(active);
   }
 
-  @include modifier(link);
-  @include modifier(count);
-  @include modifier(footer);
+  @include element(link);
+  @include element(count);
+  @include element(footer);
 }
diff --git a/docs/examples/airbnb/scss/_hits.scss b/docs/examples/airbnb/scss/_hits.scss
index 64b276ca48..5e4d3f2be4 100644
--- a/docs/examples/airbnb/scss/_hits.scss
+++ b/docs/examples/airbnb/scss/_hits.scss
@@ -1,7 +1,7 @@
 @import "base";
 @import "variables";
 
-@include component(hits) {
-  @include element(empty);
-  @include modifier(item);
+@include block(hits) {
+  @include modifier(empty);
+  @include element(item);
 }
diff --git a/docs/examples/airbnb/scss/_index-selector.scss b/docs/examples/airbnb/scss/_index-selector.scss
index de0f6dc993..105aff07b7 100644
--- a/docs/examples/airbnb/scss/_index-selector.scss
+++ b/docs/examples/airbnb/scss/_index-selector.scss
@@ -1,6 +1,6 @@
 @import "base";
 @import "variables";
 
-@include component(index-selector) {
-  @include modifier(item);
+@include block(index-selector) {
+  @include element(item);
 }
diff --git a/docs/examples/airbnb/scss/_menu.scss b/docs/examples/airbnb/scss/_menu.scss
index d38e3ac567..b4191ed325 100644
--- a/docs/examples/airbnb/scss/_menu.scss
+++ b/docs/examples/airbnb/scss/_menu.scss
@@ -1,14 +1,14 @@
 @import "base";
 @import "variables";
 
-@include component(menu) {
-  @include modifier(header);
-  @include modifier(body);
-  @include modifier(list);
-  @include modifier(item) {
-    @include element(active);
+@include block(menu) {
+  @include element(header);
+  @include element(body);
+  @include element(list);
+  @include element(item) {
+    @include modifier(active);
   }
-  @include modifier(link);
-  @include modifier(count);
-  @include modifier(footer);
+  @include element(link);
+  @include element(count);
+  @include element(footer);
 }
diff --git a/docs/examples/airbnb/scss/_pagination.scss b/docs/examples/airbnb/scss/_pagination.scss
index e4a7267530..78df487867 100644
--- a/docs/examples/airbnb/scss/_pagination.scss
+++ b/docs/examples/airbnb/scss/_pagination.scss
@@ -1,17 +1,17 @@
 @import "base";
 @import "variables";
 
-@include component(pagination) {
-  @include modifier(item) {
-    @include element(disabled) {
+@include block(pagination) {
+  @include element(item) {
+    @include modifier(disabled) {
       visibility: hidden;
     }
   }
-  @include modifier(item-first);
-  @include modifier(item-previous);
-  @include modifier(item-page) {
-    @include element(active);
+  @include element(item-first);
+  @include element(item-previous);
+  @include element(item-page) {
+    @include modifier(active);
   }
-  @include modifier(item-next);
-  @include modifier(item-last);
+  @include element(item-next);
+  @include element(item-last);
 }
diff --git a/docs/examples/airbnb/scss/_price-ranges.scss b/docs/examples/airbnb/scss/_price-ranges.scss
index 6b692db69d..43dd1977fd 100644
--- a/docs/examples/airbnb/scss/_price-ranges.scss
+++ b/docs/examples/airbnb/scss/_price-ranges.scss
@@ -1,14 +1,14 @@
 @import "base";
 @import "variables";
 
-@include component(price-ranges) {
-  @include modifier(header);
-  @include modifier(body);
-  @include modifier(footer);
-  @include modifier(form);
-  @include modifier(range) {
-    @include element(active);
+@include block(price-ranges) {
+  @include element(header);
+  @include element(body);
+  @include element(footer);
+  @include element(form);
+  @include element(range) {
+    @include modifier(active);
   }
-  @include modifier(input-group);
-  @include modifier(button);
+  @include element(input-group);
+  @include element(button);
 }
diff --git a/docs/examples/airbnb/scss/_range-slider.scss b/docs/examples/airbnb/scss/_range-slider.scss
index 211759ba20..3e0f9d47d8 100644
--- a/docs/examples/airbnb/scss/_range-slider.scss
+++ b/docs/examples/airbnb/scss/_range-slider.scss
@@ -1,8 +1,8 @@
 @import "base";
 @import "variables";
 
-@include component(range-slider) {
-  @include modifier(target) {
+@include block(range-slider) {
+  @include element(target) {
     position: relative;
     direction: ltr;
     background: $gray-light;
@@ -12,14 +12,14 @@
     }
   }
 
-  @include modifier(base) {
+  @include element(base) {
     width: 100%;
     height: 100%;
     position: relative;
     z-index: 1;
   }
 
-  @include modifier(origin) {
+  @include element(origin) {
     position: absolute;
     right: 0;
     top: 0;
@@ -27,15 +27,15 @@
     bottom: 0;
   }
 
-  @include modifier(state-tap) {
-    @include component(range-slider) {
-      @include modifier(origin) {
+  @include element(state-tap) {
+    @include block(range-slider) {
+      @include element(origin) {
         transition: left .3s, top .3s;
       }
     }
   }
 
-  @include modifier(state-drag) {
+  @include element(state-drag) {
     * {
       cursor: inherit;
     }
@@ -44,20 +44,20 @@
   // Painting and performance;
   // Browsers can paint handles in their own layer.
   //
-  @include modifier(base) {
+  @include element(base) {
     transform: translate3d(0, 0, 0);
   }
 
-  @include modifier(connect) {
+  @include element(connect) {
     background: $blue-light;
     transition: background 450ms;
   }
 
-  @include modifier(background) {
+  @include element(background) {
     background: $gray-light;
   }
 
-  @include modifier(handle) {
+  @include element(handle) {
     border: 1px solid #ccc;
     border-radius: 50%;
     width: 20px;
@@ -68,22 +68,22 @@
     cursor: pointer;
   }
 
-  @include modifier(handle-lower) {
+  @include element(handle-lower) {
     bottom: 7px;
   }
 
-  @include modifier(handle-upper) {
+  @include element(handle-upper) {
     bottom: 7px;
   }
 
-  @include modifier(tooltip) {
+  @include element(tooltip) {
     position: absolute;
     top: -20px;
   }
 
-  @include modifier(active) {
-    @include component(range-slider) {
-      @include modifier(tooltip) {
+  @include element(active) {
+    @include block(range-slider) {
+      @include element(tooltip) {
         background: $blue-light;
         color: $white;
         border-color: $blue-dark;
@@ -91,9 +91,9 @@
     }
   }
 
-  @include modifier(handle-upper) {
-    @include component(range-slider) {
-      @include modifier(tooltip) {
+  @include element(handle-upper) {
+    @include block(range-slider) {
+      @include element(tooltip) {
         right: 0;
       }
     }
diff --git a/docs/examples/airbnb/scss/_refinement-list.scss b/docs/examples/airbnb/scss/_refinement-list.scss
index 03b894086e..53a5cef578 100644
--- a/docs/examples/airbnb/scss/_refinement-list.scss
+++ b/docs/examples/airbnb/scss/_refinement-list.scss
@@ -1,15 +1,15 @@
 @import "base";
 @import "variables";
 
-@include component(refinement-list) {
-  @include modifier(header);
-  @include modifier(body);
-  @include modifier(list);
-  @include modifier(item) {
-    @include element(active);
+@include block(refinement-list) {
+  @include element(header);
+  @include element(body);
+  @include element(list);
+  @include element(item) {
+    @include modifier(active);
   }
-  @include modifier(label);
-  @include modifier(checkbox);
-  @include modifier(count);
-  @include modifier(footer);
+  @include element(label);
+  @include element(checkbox);
+  @include element(count);
+  @include element(footer);
 }
diff --git a/docs/examples/airbnb/scss/_search-box.scss b/docs/examples/airbnb/scss/_search-box.scss
index caad6518d7..0fe9dbecf0 100644
--- a/docs/examples/airbnb/scss/_search-box.scss
+++ b/docs/examples/airbnb/scss/_search-box.scss
@@ -1,8 +1,8 @@
 @import "base";
 @import "variables";
 
-@include component(search-box) {
-  @include modifier(powered-by) {
+@include block(search-box) {
+  @include element(powered-by) {
     font-size: .8em;
     text-align: right;
     margin-top: 2px;
@@ -11,7 +11,7 @@
   // Image replacement technique used:
   // http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
   //
-  @include modifier(powered-by-link) {
+  @include element(powered-by-link) {
     display: inline-block;
     width: 45px;
     height: 16px;
diff --git a/docs/examples/airbnb/scss/_stats.scss b/docs/examples/airbnb/scss/_stats.scss
index b23716d6ed..474f9ada61 100644
--- a/docs/examples/airbnb/scss/_stats.scss
+++ b/docs/examples/airbnb/scss/_stats.scss
@@ -1,9 +1,9 @@
 @import "base";
 @import "variables";
 
-@include component(stats) {
-  @include modifier(header);
-  @include modifier(body);
-  @include modifier(time);
-  @include modifier(footer);
+@include block(stats) {
+  @include element(header);
+  @include element(body);
+  @include element(time);
+  @include element(footer);
 }
diff --git a/docs/examples/airbnb/scss/_toggle.scss b/docs/examples/airbnb/scss/_toggle.scss
index 4b0015f895..92e9e973e2 100644
--- a/docs/examples/airbnb/scss/_toggle.scss
+++ b/docs/examples/airbnb/scss/_toggle.scss
@@ -1,15 +1,15 @@
 @import "base";
 @import "variables";
 
-@include component(toggle) {
-  @include modifier(header);
-  @include modifier(body);
-  @include modifier(list);
-  @include modifier(item) {
-    @include element(active);
+@include block(toggle) {
+  @include element(header);
+  @include element(body);
+  @include element(list);
+  @include element(item) {
+    @include modifier(active);
   }
-  @include modifier(label);
-  @include modifier(checkbox);
-  @include modifier(count);
-  @include modifier(footer);
+  @include element(label);
+  @include element(checkbox);
+  @include element(count);
+  @include element(footer);
 }
diff --git a/docs/examples/youtube/scss/_base.scss b/docs/examples/youtube/scss/_base.scss
index 081df40730..844aa7ed4b 100644
--- a/docs/examples/youtube/scss/_base.scss
+++ b/docs/examples/youtube/scss/_base.scss
@@ -1,26 +1,26 @@
-@mixin component($component) {
-  .ais-#{$component} {
+@mixin block($block) {
+  .ais-#{$block} {
     @content
   }
 }
 
-@mixin modifier($modifier) {
-  &--#{$modifier} {
+@mixin element($element) {
+  &--#{$element} {
     @content
   }
 }
 
-@mixin element($element) {
-  &__#{$element} {
+@mixin modifier($modifier) {
+  &__#{$modifier} {
     @content
   }
 }
 
-@mixin bem($component, $modifier, $element: "") {
-  @include component($component) {
-    @include modifier($modifier) {
+@mixin bem($block, $element, $modifier: "") {
+  @include block($block) {
+    @include element($element) {
       @if $element != "" {
-        @include element($element) {
+        @include modifier($modifier) {
           @content;
         }
       } @else {
@@ -29,3 +29,4 @@
     }
   }
 }
+
diff --git a/docs/examples/youtube/scss/_hierarchical-menu.scss b/docs/examples/youtube/scss/_hierarchical-menu.scss
index 4b742baa8e..c2514815d5 100644
--- a/docs/examples/youtube/scss/_hierarchical-menu.scss
+++ b/docs/examples/youtube/scss/_hierarchical-menu.scss
@@ -1,19 +1,19 @@
 @import "base";
 @import "variables";
 
-@include component(hierarchical-menu) {
-  @include modifier(header);
-  @include modifier(body);
-  @include modifier(list) {
-    @include element(lvl0);
-    @include element(lvl1);
+@include block(hierarchical-menu) {
+  @include element(header);
+  @include element(body);
+  @include element(list) {
+    @include modifier(lvl0);
+    @include modifier(lvl1);
   }
 
-  @include modifier(item) {
-    @include element(active);
+  @include element(item) {
+    @include modifier(active);
   }
 
-  @include modifier(link);
-  @include modifier(count);
-  @include modifier(footer);
+  @include element(link);
+  @include element(count);
+  @include element(footer);
 }
diff --git a/docs/examples/youtube/scss/_hits.scss b/docs/examples/youtube/scss/_hits.scss
index 64b276ca48..5e4d3f2be4 100644
--- a/docs/examples/youtube/scss/_hits.scss
+++ b/docs/examples/youtube/scss/_hits.scss
@@ -1,7 +1,7 @@
 @import "base";
 @import "variables";
 
-@include component(hits) {
-  @include element(empty);
-  @include modifier(item);
+@include block(hits) {
+  @include modifier(empty);
+  @include element(item);
 }
diff --git a/docs/examples/youtube/scss/_index-selector.scss b/docs/examples/youtube/scss/_index-selector.scss
index de0f6dc993..105aff07b7 100644
--- a/docs/examples/youtube/scss/_index-selector.scss
+++ b/docs/examples/youtube/scss/_index-selector.scss
@@ -1,6 +1,6 @@
 @import "base";
 @import "variables";
 
-@include component(index-selector) {
-  @include modifier(item);
+@include block(index-selector) {
+  @include element(item);
 }
diff --git a/docs/examples/youtube/scss/_menu.scss b/docs/examples/youtube/scss/_menu.scss
index d38e3ac567..b4191ed325 100644
--- a/docs/examples/youtube/scss/_menu.scss
+++ b/docs/examples/youtube/scss/_menu.scss
@@ -1,14 +1,14 @@
 @import "base";
 @import "variables";
 
-@include component(menu) {
-  @include modifier(header);
-  @include modifier(body);
-  @include modifier(list);
-  @include modifier(item) {
-    @include element(active);
+@include block(menu) {
+  @include element(header);
+  @include element(body);
+  @include element(list);
+  @include element(item) {
+    @include modifier(active);
   }
-  @include modifier(link);
-  @include modifier(count);
-  @include modifier(footer);
+  @include element(link);
+  @include element(count);
+  @include element(footer);
 }
diff --git a/docs/examples/youtube/scss/_pagination.scss b/docs/examples/youtube/scss/_pagination.scss
index e4a7267530..78df487867 100644
--- a/docs/examples/youtube/scss/_pagination.scss
+++ b/docs/examples/youtube/scss/_pagination.scss
@@ -1,17 +1,17 @@
 @import "base";
 @import "variables";
 
-@include component(pagination) {
-  @include modifier(item) {
-    @include element(disabled) {
+@include block(pagination) {
+  @include element(item) {
+    @include modifier(disabled) {
       visibility: hidden;
     }
   }
-  @include modifier(item-first);
-  @include modifier(item-previous);
-  @include modifier(item-page) {
-    @include element(active);
+  @include element(item-first);
+  @include element(item-previous);
+  @include element(item-page) {
+    @include modifier(active);
   }
-  @include modifier(item-next);
-  @include modifier(item-last);
+  @include element(item-next);
+  @include element(item-last);
 }
diff --git a/docs/examples/youtube/scss/_price-ranges.scss b/docs/examples/youtube/scss/_price-ranges.scss
index 6b692db69d..43dd1977fd 100644
--- a/docs/examples/youtube/scss/_price-ranges.scss
+++ b/docs/examples/youtube/scss/_price-ranges.scss
@@ -1,14 +1,14 @@
 @import "base";
 @import "variables";
 
-@include component(price-ranges) {
-  @include modifier(header);
-  @include modifier(body);
-  @include modifier(footer);
-  @include modifier(form);
-  @include modifier(range) {
-    @include element(active);
+@include block(price-ranges) {
+  @include element(header);
+  @include element(body);
+  @include element(footer);
+  @include element(form);
+  @include element(range) {
+    @include modifier(active);
   }
-  @include modifier(input-group);
-  @include modifier(button);
+  @include element(input-group);
+  @include element(button);
 }
diff --git a/docs/examples/youtube/scss/_range-slider.scss b/docs/examples/youtube/scss/_range-slider.scss
index 6ebf0e026b..a916041803 100644
--- a/docs/examples/youtube/scss/_range-slider.scss
+++ b/docs/examples/youtube/scss/_range-slider.scss
@@ -1,8 +1,8 @@
 @import "base";
 @import "variables";
 
-@include component(range-slider) {
-  @include modifier(target) {
+@include block(range-slider) {
+  @include element(target) {
     position: relative;
     direction: ltr;
     background: $gray-light;
@@ -12,14 +12,14 @@
     }
   }
 
-  @include modifier(base) {
+  @include element(base) {
     width: 100%;
     height: 100%;
     position: relative;
     z-index: 1;
   }
 
-  @include modifier(origin) {
+  @include element(origin) {
     position: absolute;
     right: 0;
     top: 0;
@@ -27,15 +27,15 @@
     bottom: 0;
   }
 
-  @include modifier(state-tap) {
-    @include component(range-slider) {
-      @include modifier(origin) {
+  @include element(state-tap) {
+    @include block(range-slider) {
+      @include element(origin) {
         transition: left .3s, top .3s;
       }
     }
   }
 
-  @include modifier(state-drag) {
+  @include element(state-drag) {
     * {
       cursor: inherit;
     }
@@ -44,20 +44,20 @@
   // Painting and performance;
   // Browsers can paint handles in their own layer.
   //
-  @include modifier(base) {
+  @include element(base) {
     transform: translate3d(0, 0, 0);
   }
 
-  @include modifier(connect) {
+  @include element(connect) {
     background: $blue-light;
     transition: background 450ms;
   }
 
-  @include modifier(background) {
+  @include element(background) {
     background: $gray-light;
   }
 
-  @include modifier(handle) {
+  @include element(handle) {
     width: 1px;
     height: 10px;
     position: relative;
@@ -66,21 +66,21 @@
     cursor: pointer;
   }
 
-  @include modifier(handle-lower) {
+  @include element(handle-lower) {
     bottom: 10px;
   }
 
-  @include modifier(active) {
+  @include element(active) {
     background: $blue-dark;
   }
 
-  @include modifier(tooltip) {
+  @include element(tooltip) {
     position: absolute;
   }
 
-  @include modifier(active) {
-    @include component(range-slider) {
-      @include modifier(tooltip) {
+  @include element(active) {
+    @include block(range-slider) {
+      @include element(tooltip) {
         background: $blue-light;
         color: $white;
         border-color: $blue-dark;
@@ -88,17 +88,17 @@
     }
   }
 
-  @include modifier(handle-lower) {
-    @include component(range-slider) {
-      @include modifier(tooltip) {
+  @include element(handle-lower) {
+    @include block(range-slider) {
+      @include element(tooltip) {
         top: -24px;
       }
     }
   }
 
-  @include modifier(handle-upper) {
-    @include component(range-slider) {
-      @include modifier(tooltip) {
+  @include element(handle-upper) {
+    @include block(range-slider) {
+      @include element(tooltip) {
         bottom: -24px;
         right: 0;
       }
diff --git a/docs/examples/youtube/scss/_refinement-list.scss b/docs/examples/youtube/scss/_refinement-list.scss
index 03b894086e..53a5cef578 100644
--- a/docs/examples/youtube/scss/_refinement-list.scss
+++ b/docs/examples/youtube/scss/_refinement-list.scss
@@ -1,15 +1,15 @@
 @import "base";
 @import "variables";
 
-@include component(refinement-list) {
-  @include modifier(header);
-  @include modifier(body);
-  @include modifier(list);
-  @include modifier(item) {
-    @include element(active);
+@include block(refinement-list) {
+  @include element(header);
+  @include element(body);
+  @include element(list);
+  @include element(item) {
+    @include modifier(active);
   }
-  @include modifier(label);
-  @include modifier(checkbox);
-  @include modifier(count);
-  @include modifier(footer);
+  @include element(label);
+  @include element(checkbox);
+  @include element(count);
+  @include element(footer);
 }
diff --git a/docs/examples/youtube/scss/_search-box.scss b/docs/examples/youtube/scss/_search-box.scss
index caad6518d7..0fe9dbecf0 100644
--- a/docs/examples/youtube/scss/_search-box.scss
+++ b/docs/examples/youtube/scss/_search-box.scss
@@ -1,8 +1,8 @@
 @import "base";
 @import "variables";
 
-@include component(search-box) {
-  @include modifier(powered-by) {
+@include block(search-box) {
+  @include element(powered-by) {
     font-size: .8em;
     text-align: right;
     margin-top: 2px;
@@ -11,7 +11,7 @@
   // Image replacement technique used:
   // http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
   //
-  @include modifier(powered-by-link) {
+  @include element(powered-by-link) {
     display: inline-block;
     width: 45px;
     height: 16px;
diff --git a/docs/examples/youtube/scss/_stats.scss b/docs/examples/youtube/scss/_stats.scss
index b23716d6ed..474f9ada61 100644
--- a/docs/examples/youtube/scss/_stats.scss
+++ b/docs/examples/youtube/scss/_stats.scss
@@ -1,9 +1,9 @@
 @import "base";
 @import "variables";
 
-@include component(stats) {
-  @include modifier(header);
-  @include modifier(body);
-  @include modifier(time);
-  @include modifier(footer);
+@include block(stats) {
+  @include element(header);
+  @include element(body);
+  @include element(time);
+  @include element(footer);
 }
diff --git a/docs/examples/youtube/scss/_toggle.scss b/docs/examples/youtube/scss/_toggle.scss
index 4b0015f895..92e9e973e2 100644
--- a/docs/examples/youtube/scss/_toggle.scss
+++ b/docs/examples/youtube/scss/_toggle.scss
@@ -1,15 +1,15 @@
 @import "base";
 @import "variables";
 
-@include component(toggle) {
-  @include modifier(header);
-  @include modifier(body);
-  @include modifier(list);
-  @include modifier(item) {
-    @include element(active);
+@include block(toggle) {
+  @include element(header);
+  @include element(body);
+  @include element(list);
+  @include element(item) {
+    @include modifier(active);
   }
-  @include modifier(label);
-  @include modifier(checkbox);
-  @include modifier(count);
-  @include modifier(footer);
+  @include element(label);
+  @include element(checkbox);
+  @include element(count);
+  @include element(footer);
 }