BEM Basics – Why and how to apply BEM method for writing CSS. – Block - Element - Modifier

View Github Repository Open presentation in a new window

noudilus

See all presentation from noudilus

BEM Basics – Why and how to apply BEM method for writing CSS. – Block - Element - Modifier

0 0

bem-basic-presentation

Why and how to use BEM method for writing CSS at Blue Mango Interactive

On Github noudilus / bem-basic-presentation

BEM Basics

Why and how to apply BEM method for writing CSS.

Created by Arnoud van der Velden / @noudjes

BEM?

A method to write reusable, scalable, maintainable & fast CSS code.

Block - Element - Modifier

A way to write modular CSS

Forces to think about structure

Helps interpret a design quicker so you can start coding sooner

<div class="menu">
  <div class="menu__item"></div>
  <div class="menu__item menu__item--active"></div>
</div>

.menu {
  background: red;
  padding: 10px;
}

.menu__item {
  opacity: 0.5;
  margin: 10px;
}

.menu__item--active {
  margin: 20px;
  border: 1px solid blue;
}

.menu {
  background: red;
  padding: 10px;

  &__item {
    opacity: 0.5;
    margin: 10px;
  }

  &__item--active {
    margin: 20px;
    border: 1px solid blue;
  }
}

Guidelines

Block

Independant reusable part of your interface

Contains elements and other blocks

Can contain one or more modifiers

Not to be confused with HTML blocks

Element

Belongs to a Block

Can contain blocks or other elements

Can contain one or more modifiers

Modifier

A state different from the default

Can be applied to Block or Element

Most difficult part to understand

Way to go

Only works with semantic HTML

Combine with other methods (OOCSS, SMACCS)

No deep nesting, keep small modules

Discussion points

How to use Modifier correctly on a block

How to apply Modifiers with LESS

Use @extend only if you are confident about the output

Something else..?

BEM Basics Why and how to apply BEM method for writing CSS. Created by Arnoud van der Velden / @noudjes