Introduction

Introduction

What is BEM

• A front-end naming methodology
   
• Follows simple rules to name and organise your CSS

Introduction > What is BEM?

[block]__[element]--[modifier]

Why BEM

• Promotes reuse of components
   
• Easy to see what depends on each other
   
• Naming convention can be used between development and design teams
   
• Everything is a class, nothing is nested
   
• Relatively easy to learn

Introduction > Why BEM

Block

• Standalone entity that is meaningful on its own
   
• Your base element
   
• The outermost part of your component

// Examples:

header
container
checkbox

Block

Naming conventions

Names may consist of Latin letters, digits, dashes and underscores

// HTML
<header class="block"></header>


// CSS
.block {
}

Block > Naming conventions

Element

• Have no standalone meaning
   
• This is a child of your block level element
   
• Element can never have another element

// Examples:

list item
header title
checkbox caption

Element

Naming conventions

• Names may consist of Latin letters, digits, dashes and underscores
   
• Is formed as a block name plus 2 underscores and an element name

// HTML
<header class="block">
    <span class="block__element"></span>
</header>


// CSS
.block {
}

.block__element {
}

Element > Naming conventions

Modifier

• An extension which specifies some change in the style of the block or the element it is applied to
   
• Used to change appearances, behaviors or states
   
• Allows you to overwrite the styles for a specific type of a block, or an element

// Examples:

disabled
checked
fixed
color

Modifier

Naming conventions

• Names may consist of Latin letters, digits, dashes and underscores
   
• CSS class is formed as block’s or element’s name plus two dashes

Modifier > Naming conventions

// HTML
<header class="block block--big">
    <span class="block__element"></span>
</header>


// CSS
.block {
}

.block--big {
}

.block__element {
}

Examples

Examples

Examples > Example 1: Blocks and elements

<form class="search">
    <label class="search__label"></label>
    <input type="text" class="search__input">
    <button type="submit" class="search__submit">Search</button>
</form>

.search {
}

.search__label {
}

.search__input {
}

.search__submit {
}

Examples > Example 2: Blocks, elements and a modifier

<form class="search">
    <label class="search__label"></label>
    <input type="text" class="search__input">
    <input type="text" class="search__input search__input--border">
    <button type="submit" class="search__submit">Search</button>
</form>

.search {
}

.search__label {
}

.search__input {
}

.search__input--border {
}

.search__submit {
}

Examples > Example 3: Block and elements

<div class="block">
    <div class="block__elem1">
        <div class="block__elem2">
            <div class="block__elem3"></div>
        </div>
    </div>
</div>

.block {
}

.block__elem3 {
}

.block__elem3 {
}

.block__elem3 {
}