Legos on the Web
Created by Benjamim Sonntag for a siosLIFE talk & roll
Every web developer meets the same problems.
BEM Methodology
It was invented to develop sites which should be
launched fast and supported for a long time.
It helps to create extendable and reusable
interface components.
BEM provides rules to...
...achieve code consistency.
BEM provides rules to...
...grow and scale your codebase.
BEM provides rules to...
...increase productivity.
BEM provides rules to...
...improve team work.
Key concepts of BEM
| B | Block |
| E | Element |
| M | Modifier |
Block
A functionally independent component.
Being independent allows for their re-use.
A block encapsulates behavior, layout and style.
Block features:
- It shouldn't define its geometry and positioning.
- The block shouldn't influence its environment.
- Blocks can be composed of other blocks.
An example:
Blocks can be nested inside any other blocks.
Blocks can be moved around on a page,
moved between pages or projects.
Blocks can be re-used multiple times.
Element
A constituent part of a block that can't be used outside of it.
Element features:
- Positioning and geometry rules should be applied to elements by the parent block.
- Elements can be nested inside elements.
- An element can be another block.
An example:
Modifier
Defines the appearance and behavior of a block or element.
A block is changed by adding or removing modifiers.
This frees you from unneeded copying and pasting.
An example:
SUIT CSS naming convention
- Blocks:
.Button - Elements:
.Button-icon -
Modifiers:
.Button--primary.Button.is-active
Atomic Design
by Brad Frost
“Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.”
Atoms
Molecules
Organisms
Templates
Pages
Questions?
