There two useful BEM Mixins available by default writing BEM Element Classes and Modifier Classes.
app-bem-e() & app-bem-m()
Input
.c-content-teaser{
border: 1px solid grey;
//Element
@include app-bem-e(title){
color: black;
//..
//Modifier
@include app-bem-m(color-blue){
color: blue;
//..
}
}
//Modifier
@include app-bem-m(type-news){
border-width: 15px;
//..
}
//Modifier
@include app-mq(large-up){
@include app-bem-m(bg-blue\@large-up){
background: blue;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Output
/*Block*/
.c-content-teaser{ border: 1px solid grey; }
/*Element*/
.c-content-teaser__title{ color: black; }
/*Modifier - Modifies the element "title" in Block "c-teaser"*/
.c-content-teaser__title--color-blue{ color: blue; }
/*Modifier - Modifies the block "c-teaser"*/
.c-content-teaser--type-news{ border-width: 15px;}
/*Modifier - Modifies the block "c-teaser" for @large-up*/
@media only screen and (min-width: 48em) {
.c-content-teaser--bg-blue\@large-up {
background: blue;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19