BEM it!

Martin Pešout / front-end developer at dotBlue @martinpesout

What is BEM?WHAT + WHY + HOW

Milestone 2013• 2013

• boom of responsive design (RWD)

• RWD means also more complex CSS styles

Milestone 2013• 2013

• boom of responsive design (RWD)

• RWD means also more complex CSS styles

• 2014

• boom of optimization of developed responsive webpages

• Fluid web doesn’t mean fast web on mobile connection

Web development in 2014 needs methodology

We really need good rules !!

… rather than frameworks

Why has been BEM created?

• The way how to organize code for whole team on big project

• Reusable components

• Long-standing components

• Easy to learn for new team members

It’s not magicBEM is not hard to learn. A

lot of articles and examples everywhere.

Don’t use #ID selectors!

BEM = block + element + modifier

Block• Standalone part of interface

• button

• menu

• heading

Block• Standalone part of interface

• button

• menu

• heading

• Reusable

• Independent on other styles

Element• An internal part of block

• button

• menu

• heading

Element• An internal part of block

• button - icon

• menu - item

• heading - logo

Element• An internal part of block

• button - icon

• menu - item

• heading - logo

• No standalone meaning outside of a block

• Some blocks have no element(s)

Modifier• Defines the state of property on a block or

element

• button

• menu - item

• heading

Modifier• Defines the state of property on a block or

element

• button - color

• menu - item - active state

• heading - level

BEM uses class names to describe block, elements

and modifiers

Naming convenctionblock btn menu heading

Naming convenctionblock__element btn__icon menu__item heading__logo

Naming convenctionblock__element––modifier btn––large btn__icon––arrow menu––secondary menu__item––active

Header<div class="header header--main"> <h1 class=“header__title">Brian &amp; Jessica</h1> <div class=“header__description”> Main information about our wedding </div> </div>

Common mistakes

• Don’t use shared styles

• No common resets (only normalize.css is allowed)

• No CSS definition outside of block

<div class="header header--main"> <h1>Brian &amp; Jessica</h1> <p> Main information about our wedding </p> </div>

Button<a href="#love-story" class="action-btn action-btn––arrow-down”></a>

Banner<div class=“banner"> <img src="/images/main-banner-large.jpg" alt="Bride and groom” class="banner__img"> <div class="banner__title">Soon together</div> <a href="#love-story" class="banner__btn action-btn action-btn--arrow-down"></a> </div>

Banner<div class=“banner"> <img src="/images/main-banner-large.jpg" alt="Bride and groom” class="banner__img"> <div class="banner__title">Soon together</div> <a href="#love-story" class="banner__btn action-btn action-btn--arrow-down"></a> </div>

• We can combine more blocks together

Independent styles• You can always change syntax and have always

the same look

<ul class=“menu”>

<li class=“menu__item”>Home</li>

<li class=“menu__item menu__item––active”>Contact</li>

</ul>

<div class=“menu”> <div class=“menu__item”>Home</div> <div class=“menu__item menu__item––active”>Contact</div> </div>

Another best practices

• Preprocessor can help you to organize your styles to better file structure

• Use prefix js- class or ID prefix for JavaScript selectors

Thank you

Martin Pešout / front-end developer at dotBlue @martinpesout