Chainable Bem Modifier

Chainable BEM Modifier for SCSS

Disclaimer: All following information is coming from Jordan Lewis’s post
I just happened to use this style of writting scss code to make my life little bit easier.

Some information about BEM syntax

BEM

1
block__element--modifier

for example:

1
2
3
.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

With Chainable BEM Modifier, it’s just easier and prettier to write and understand

The general format of C-BEM-Modifier is:

1
js-hook block__element--variation -modifier h-helper is-state

JS Hooks are prefixed with js- and do not have any styles. Their whole purpose is to be used in JavaScript to target elements in the DOM.

One example out of the code block below is:

1
.game-pane__cell-container--green-cell -is-activated

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// `&` below is 'game-pane'
&__cell-container {
border: 1px #d1c1c1 solid;
height: 20px;
width: 20px;
box-sizing: border-box;
background-color: #fff;
cursor: pointer;
&.--green-cell {
background-color: rgb(50, 119, 68);

&.-is-activated {
animation: cellActivating 0.25s;
}
}
}