BEM Cheatsheet
BEM
Know your element (__) from your modifier (--). Both blocks and elements can have modifiers. (.b--m, .b__e--m).
In react lingo, BEM’s “B” (for “Block”) is a component.
Elements can nest deep in html, but the selector doesn’t represent this deep nesting. (no .a__b__c, instead just .a__c - which can be in .a__b).
The idea The idea with BEM is to keep a flat hierarchy (don’t nest selectors) with simple selectors - only one class per selector, and no IDs or element tags. By not nesting we have a low and consistent specificity of all html elements, which makes it possible to have modifications of styles without using !important.
Don’t ever use the html element as well as a class in the selector for this same reason (no button.button), as well as not to lock oneself into having to use a specific type of element.
Only time nesting of selectors is allowed is if elements need changing when the block has a modifier class applied to it (.editor--dark .editor__text {color: white} for example).
Use of html element selectors can be used at times, for example in the case of the flag above, where we need to wrap the img in an element for styling, but might still want to apply styles to the img without having another class (.flag__actual-image is a bit ugly). But try to keep it to a minimum, and don’t have “magic” elements, where (for example) a span in a .media gets grey text and centered (give it a name instead, .media__caption maybe?).
Since we scope every element and modifier, we are free to use whatever names we want - no risk of clashes between the icon called danger and the button style called danger.
**Example: **
Notice the two buttons which are both elements of the editor, as well as blocks in their own right, in two different ways.
Also, note that there are two navs, but one would be stuck to the top (--top) and the other bottom, but they are both nav bars of the editor, and so share most styles (different variants/modifications of the same element).
Lastly, notice the use of icon--remove even though we don’t have icon. Since we don’t nest our selectors it’s possible to “borrow” modifiers (and elements) from blocks without applying the full block styles. In this case icon--remove sets the content of the :before pseudo element to the right icon, but doesn’t apply any base icon styles, something .icon does but a button doesn’t need. If we combined classes when making selectors .icon.icon--remove this wouldn’t be possible, only thanks to the flat hierarchy with simple selectors is this possible.
1
2
3
4
5
6
7
8
9
10
11
12
<div class="editor editor--dark-mode">
<div class="editor__nav editor__nav--top">
<input class="editor__filename" type="text" />
<button class="editor__button btn btn--danger btn--icon icon--remove">Move to trash</button>
</div>
<div class="editor__body">
...
</div>
<div class="editor__nav editor__nav--bottom">
<button class="editor__button btn btn--primary btn--icon icon--save">Save</button>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.flag {}
.flag__image,
.flag__body {}
.flag--top .flag__image,
.flag--top .flag__body {}
.flag--bottom .flag__image,
.flag--bottom .flag__body {}
.flag__image {}
.flag__image > img {}
.flag__body {}
1
2
3
4
5
6
7
8
9
10
<div class="flag flag--top">
<div class="flag__image">
<img src="{author.img}" width="55">
</div>
<div class="flag__body">
<span class="block smallcaps txt grey delta">Words By</span>
<strong>{author.name}</strong>
</div>
</div>
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
.flag {
display: table;
&__image,
&__body {
display: table-cell;
vertical-align: middle;
.flag--top & {
vertical-align: top;
}
.flag--bottom & {
vertical-align: bottom;
}
}
&__image {
padding-right: $margin / 2;
> img {
display: block;
max-width: none;
}
}
&__body {
width: 100%;
}
}
some other old examples
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
//Sections with only one row of content
<section class="cta-strip">
<div class="container cta-strip__grid_container">
<div class="cta_strip__cell">
//content here
</div>
</div>
</section>
//Sections with two rows of more
//titles and text classes
<section class="benefits">
<div class="container benefits__intro_container">
<h3 class = "benefits__title">Build your Google Ads marketing, brick by brick</h3>
<p class = "benefits__text">some intro text</p>
</div>
<div class="benefits__grid_container">
<div class="benefits__cell">
//content
</div>
</div>
</section>
//list contanter
<div class="container faq__list_container">
<ul>
<li>Don’t you need a professional to do Google Ads? </li>
<li>Google just wants to make a profit. They don’t care about small business.</li>
//grid container will contain cells that make up the grid
<div class = "container problems__grid_container">
<div class="problems__cell">
<span class = "problems_icon">?</span>
<p> Do you want to manage your own Google Ads, but don’t know where to start? </p>
</div>
//using wrappers to wrap an icon and a cell (for when the icon needs to be outside of the cell)
<div class = "container problems__grid_container">
<div class = "problems__cell_wrapper">
<div class = "problems__icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/question_mark.png" alt="question mark icon">
</div>
<div class="problems__cell">
<p> Do you want to manage your own Google Ads, but don’t know where to start? </p>
</div>
</div>
//text and titles within grid cells
<div class="container extras__grid_container">
<div class="extras__cell"><span class="icon"></span><h4 class = "extras__cell_title">Coaching session</h4><p class = "extras__cell_text">Get a one-on-one, 60-minute session with your expert course instructor. With direct support, you’ll stay on track and fly through challenges with ease..</p></div>
//cta_btns
.guarantee {
text-align: center;
background-color: $blue;
&__cta_btn {
margin: 0 auto;
}
}
//html for buttons
<a class = "guarantee__cta_btn cta_btn" href="#">Join the waitlist</a>
Comments powered by Disqus.