- The name of classes and files where the classes are defined should match!
Filenames of stylesheets and classes are always written in kebab-case. e.g.
grid-container.objects.scss.
//06_objects/_/box.objects.scss
.o-box{}
1
2
2
There are still some inconsistencies in utils!
- Objects(o-), Components (c-), Utils (u-) have always a classname prefix.
# Writing in BEM
Naming Classes should follow the convention of Block-Element-Modifier. » What is BEM? (opens new window).
The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using BEM’s proper naming convention will better prepare you for design changes made to your website. (BEM about itself)
Input
//Block
.c-content-teaser{
border: 1px solid grey;
//Element
@at-root #{&}__title {
color: black;
//..
//Modifier
@at-root #{&}--color-blue {
color: blue;
//..
}
}
//Modifier
@at-root #{&}--type-news {
border-width: 15px;
//..
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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;}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
There are some helpful BEM mixins that makes your life easier when writing in BEM. » Using BEM Mixins
# Taking BEM a bit more further
What if you want to visually change an element for large and higher screens by only setting a class? So the breakpoint should be be mentioned in the name. Right?
Input
.c-base-alert{
//Default
background-color: yellow;
padding: 20px;
//..
//Modified bg @large-breakpoint
@at-root #{&}--bg-red\@large-up {
@include app-mq(large-up) {
background: red;
//..
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Output
.c-base-alert { background-color: yellow; padding: 20px;}
@media only screen and (min-width: 48em) {
.c-base-alert--bg-red\@large-up {
background: red;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
Using classes
<template>
<div class="c-base-alert c-base-alert--bg-red@large-up"></div>
</template>
1
2
3
2
3