Skip to content

Commit fcfb408

Browse files
pixelasticpixelastic
committed
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.
1 parent fbeff9b commit fcfb408

36 files changed

+313
-311
lines changed

‎css/_base.scss

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
@mixin component($component) {
2-
.ais-#{$component} {
1+
@mixin block($block) {
2+
.ais-#{$block} {
33
@content
44
}
55
}
66

7-
@mixin modifier($modifier) {
8-
&--#{$modifier} {
7+
@mixin element($element) {
8+
&--#{$element} {
99
@content
1010
}
1111
}
1212

13-
@mixin element($element) {
14-
&__#{$element} {
13+
@mixin modifier($modifier) {
14+
&__#{$modifier} {
1515
@content
1616
}
1717
}
1818

19-
@mixin bem($component, $modifier, $element: "") {
20-
@include component($component) {
21-
@include modifier($modifier) {
19+
@mixin bem($block, $element, $modifier: "") {
20+
@include block($block) {
21+
@include element($element) {
2222
@if $element != "" {
23-
@include element($element) {
23+
@include modifier($modifier) {
2424
@content;
2525
}
2626
} @else {

‎css/default/_hierarchical-menu.scss

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,42 @@
11
@import "../base";
22
@import "variables";
33

4-
@include component(hierarchical-menu) {
5-
@include modifier(header) {
4+
@include block(hierarchical-menu) {
5+
@include element(header) {
66
/* widget header */
77
}
8-
@include modifier(body) {
8+
@include element(body) {
99
/* widget body */
1010
}
11-
@include modifier(list) {
11+
@include element(list) {
1212
/* item list */
13-
@include element(lvl0) {
13+
@include modifier(lvl0) {
1414
/* item list level 0 */
1515
}
16-
@include element(lvl1) {
16+
@include modifier(lvl1) {
1717
/* item list level 1 */
1818
margin-left: 10px;
1919
}
20-
@include element(lvl2) {
20+
@include modifier(lvl2) {
2121
/* item list level 0 */
2222
margin-left: 10px;
2323
}
2424
}
2525

26-
@include modifier(item) {
26+
@include element(item) {
2727
/* list item */
28-
@include element(active) {
28+
@include modifier(active) {
2929
/* active list item */
3030
}
3131
}
3232

33-
@include modifier(link) {
33+
@include element(link) {
3434
/* item link */
3535
}
36-
@include modifier(count) {
36+
@include element(count) {
3737
/* item count */
3838
}
39-
@include modifier(footer) {
39+
@include element(footer) {
4040
/* widget footer */
4141
}
4242
}

‎css/default/_hits.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@import "../base";
22
@import "variables";
33

4-
@include component(hits) {
5-
@include element(empty) {
4+
@include block(hits) {
5+
@include modifier(empty) {
66
/* empty container */
77
}
8-
@include modifier(item) {
8+
@include element(item) {
99
/* hit item */
1010
}
1111
}

‎css/default/_index-selector.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@import "../base";
22
@import "variables";
33

4-
@include component(index-selector) {
5-
@include modifier(item) {
4+
@include block(index-selector) {
5+
@include element(item) {
66
/* selector item */
77
}
88
}

‎css/default/_menu.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
@import "../base";
22
@import "variables";
33

4-
@include component(menu) {
5-
@include modifier(header) {
4+
@include block(menu) {
5+
@include element(header) {
66
/* widget header */
77
}
8-
@include modifier(body) {
8+
@include element(body) {
99
/* widget body */
1010
}
11-
@include modifier(list) {
11+
@include element(list) {
1212
/* item list */
1313
}
14-
@include modifier(item) {
14+
@include element(item) {
1515
/* list item */
16-
@include element(active) {
16+
@include modifier(active) {
1717
/* active list item */
1818
}
1919
}
20-
@include modifier(link) {
20+
@include element(link) {
2121
/* item link */
2222
}
23-
@include modifier(count) {
23+
@include element(count) {
2424
/* item count */
2525
}
26-
@include modifier(footer) {
26+
@include element(footer) {
2727
/* widget footer */
2828
}
2929
}

‎css/default/_pagination.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
@import "../base";
22
@import "variables";
33

4-
@include component(pagination) {
5-
@include modifier(item) {
4+
@include block(pagination) {
5+
@include element(item) {
66
/* pagination item */
7-
@include element(disabled) {
7+
@include modifier(disabled) {
88
/* disabled pagination item */
99
visibility: hidden;
1010
}
1111
}
12-
@include modifier(item-first) {
12+
@include element(item-first) {
1313
/* first pagination item */
1414
}
15-
@include modifier(item-previous) {
15+
@include element(item-previous) {
1616
/* previous pagination item */
1717
}
18-
@include modifier(item-page) {
18+
@include element(item-page) {
1919
/* page */
20-
@include element(active) {
20+
@include modifier(active) {
2121
/* active page */
2222
}
2323
}
24-
@include modifier(item-next) {
24+
@include element(item-next) {
2525
/* next pagination item */
2626
}
27-
@include modifier(item-last) {
27+
@include element(item-last) {
2828
/* last pagination item */
2929
}
3030
}

‎css/default/_price-ranges.scss

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,45 @@
11
@import "../base";
22
@import "variables";
33

4-
@include component(price-ranges) {
5-
@include modifier(header) {
4+
@include block(price-ranges) {
5+
@include element(header) {
66
/* widget header */
77
}
8-
@include modifier(body) {
8+
@include element(body) {
99
/* widget body */
1010
}
11-
@include modifier(footer) {
11+
@include element(footer) {
1212
/* widget footer */
1313
}
14-
@include modifier(list) {
14+
@include element(list) {
1515
/* item list */
1616
}
17-
@include modifier(item) {
17+
@include element(item) {
1818
/* list item */
19-
@include element(active) {
19+
@include modifier(active) {
2020
/* active list item */
2121
}
2222
}
2323

24-
@include modifier(link) {
24+
@include element(link) {
2525
/* item link */
2626
}
27-
@include modifier(form) {
27+
@include element(form) {
2828
/* custom form */
2929
}
30-
@include modifier(label) {
30+
@include element(label) {
3131
/* custom form label */
3232
}
33-
@include modifier(currency) {
33+
@include element(currency) {
3434
/* currency */
3535
}
36-
@include modifier(input) {
36+
@include element(input) {
3737
/* custom form input */
3838
}
39-
@include modifier(separator) {
39+
@include element(separator) {
4040
/* custom form separator */
4141
}
42-
@include modifier(button) {
42+
@include element(button) {
4343
/* custom form button */
4444
}
4545
}

‎css/default/_range-slider.scss

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ $range-slider-marker-bg: #DDD;
88
$range-slider-bar-color: $blue-light;
99
$range-slider-handle-bg: $white;
1010

11-
@include component(range-slider) {
12-
@include modifier(target) {
11+
@include block(range-slider) {
12+
@include element(target) {
1313
position: relative;
1414
direction: ltr;
1515
background: $range-slider-bg;
@@ -18,7 +18,7 @@ $range-slider-handle-bg: $white;
1818
margin-bottom: 4em;
1919
}
2020

21-
@include modifier(base) {
21+
@include element(base) {
2222
width: 100%;
2323
height: 100%;
2424
position: relative;
@@ -29,23 +29,23 @@ $range-slider-handle-bg: $white;
2929
border-right: 2px solid $range-slider-marker-bg;
3030
}
3131

32-
@include modifier(origin) {
32+
@include element(origin) {
3333
position: absolute;
3434
right: 0;
3535
top: 0;
3636
left: 0;
3737
bottom: 0;
3838
}
3939

40-
@include modifier(connect) {
40+
@include element(connect) {
4141
background: $range-slider-bar-color;
4242
}
4343

44-
@include modifier(background) {
44+
@include element(background) {
4545
background: $range-slider-bg;
4646
}
4747

48-
@include modifier(handle) {
48+
@include element(handle) {
4949
width: $range-slider-handle-size;
5050
height: $range-slider-handle-size;
5151
position: relative;
@@ -56,24 +56,24 @@ $range-slider-handle-bg: $white;
5656
cursor: pointer;
5757
}
5858

59-
@include modifier(handle-lower) {
59+
@include element(handle-lower) {
6060
left: -($range-slider-handle-size / 2);
6161
bottom: ($range-slider-handle-size / 2 - $range-slider-target-height / 2);
6262
}
6363

64-
@include modifier(handle-upper) {
64+
@include element(handle-upper) {
6565
right: $range-slider-handle-size / 2;
6666
bottom: ($range-slider-handle-size / 2 - $range-slider-target-height / 2);
6767
}
6868

69-
@include modifier(tooltip) {
69+
@include element(tooltip) {
7070
position: absolute;
7171
background: $white;
7272
top: -2em;
7373
font-size: .8em;
7474
}
7575

76-
@include modifier(pips) {
76+
@include element(pips) {
7777
box-sizing: border-box;
7878
position: absolute;
7979
height: 3em;
@@ -82,33 +82,33 @@ $range-slider-handle-bg: $white;
8282
width: 100%;
8383
}
8484

85-
@include modifier(value) {
85+
@include element(value) {
8686
width: $range-slider-handle-size * 2;
8787
position: absolute;
8888
text-align: center;
8989
margin-left: -$range-slider-handle-size;
9090
padding-top: 15px;
9191
font-size: .8em;
9292
}
93-
@include modifier(value-sub) {
93+
@include element(value-sub) {
9494
font-size: .8em;
9595
padding-top: 15px;
9696
}
9797

98-
@include modifier(marker) {
98+
@include element(marker) {
9999
position: absolute;
100100
background: $range-slider-marker-bg;
101101
margin-left: -1px;
102102
width: 1px;
103103
height: 5px;
104104
}
105-
@include modifier(marker-sub) {
105+
@include element(marker-sub) {
106106
background: $range-slider-marker-bg;
107107
width: 2px;
108108
margin-left: -2px;
109109
height: 7px + $range-slider-target-height;
110110
}
111-
@include modifier(marker-large) {
111+
@include element(marker-large) {
112112
background: $range-slider-marker-bg;
113113
width: 2px;
114114
margin-left: -2px;

0 commit comments

Comments
 (0)