BEM it! Martin Pešout / front-end developer at dotBlue @martinpesout
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
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
Block• Standalone part of interface
• button
• menu
• heading
• Reusable
• Independent on other styles
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 - color
• menu - item - active state
• heading - level
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 & 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 & Jessica</h1> <p> Main information about our wedding </p> </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>
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