+ All Categories
Home > Technology > Bem methodology

Bem methodology

Date post: 18-Dec-2014
Category:
Upload: andrew-rota
View: 109 times
Download: 13 times
Share this document with a friend
Description:
Given at CascadeBOS Meetup, 22 Oct 2013: http://www.meetup.com/cascadebos/events/142381712/
37
BEM METHODOLOGY BEM METHODOLOGY
Transcript
Page 1: Bem methodology

BEM METHODOLOGYBEM METHODOLOGY

Page 2: Bem methodology

WHO AM I?

ANDREW ROTAInteractive Developer at Sapient Global Markets

I build HTML5 / JavaScript web applicationsI was a philosophy majorI'm an avid sea kayaker

Page 3: Bem methodology

WHAT IS BEM?

BlockElementModifier

History

tl;dr: Developed by Yandex, Russia's largest search enginecompany, in 2006/2007 to bring structure to web pages.

Source: BEM

Page 4: Bem methodology
Page 5: Bem methodology

DISORGANIZEDDISORGANIZED

Image by Source: (CC BY 2.0davidd

Page 6: Bem methodology

OVER SPECIFICOVER SPECIFIC

Page 7: Bem methodology

LOCATION DEPENDENTLOCATION DEPENDENT

Image by Source: (CC BY-SA 3.0)Guma89

Page 8: Bem methodology

ECOSYSTEMOOCSS

.media {margin:10px;}

.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}

.media .img {float:left; margin-right: 10px;}

SMACSS

.pod-callout { width: 200px; }

.pod-callout input[type=text] { width: 180px; }

Atomic CSS

.M-1 {margin: 1px;}

.M-2 {margin: 2px;}

.M-4 {margin: 4px;}

Page 9: Bem methodology

BLOCKblock /blɒk/ n : A block is an independententity, a "building block" of an application. A

block can be either simple or compound(containing other blocks).

Source: BEM

Page 10: Bem methodology

BLOCKS

Source: BEM

Page 11: Bem methodology

ELEMENTel•e•ment /ˈɛləmənt/ n : An element is a part

of a block that performs a certain function.Elements are context-dependent: they onlymake sense in the context of the block they

belong to.

Source: BEM

Page 12: Bem methodology

MODIFIERmod•i•fi•er /ˈmɒdəˌfaɪər/ n : A modifier is aproperty of a block or an element that alters its

look or behavior.

Source: BEM

Page 13: Bem methodology

MODIFIERS

Source: BEM

Page 14: Bem methodology

BACK TO BLOCKS

Source: BEM

Page 15: Bem methodology

MAPPING THE UIMAPPING THE UI

Page 16: Bem methodology

DEMO APP

Page 17: Bem methodology

DEMO APP

Page 18: Bem methodology

CSS PRINCIPLESAvoid descendent or other cascading selectorsElement selectors must not be usedCSS ID selectors must not be used

Page 19: Bem methodology

WRITING BLOCKS<nav> <ul> <li><a href="#">Breaking</a></li> <li><a href="#">World</a></li> <li><a href="#">U.S.</a></li> <li><a href="#">Business</a></li> <li><a href="#">Politics</a></li> <li><a href="#">Entertainment</a></li> <li><a href="#">Technology</a></li> <li><a href="#">Sports</a></li> </ul></nav>

Page 20: Bem methodology

WRITING BLOCKS<nav class="nav-menu"> <ul> <li><a href="#">Breaking</a></li> <li><a href="#">World</a></li> <li><a href="#">U.S.</a></li> <li><a href="#">Business</a></li> <li><a href="#">Politics</a></li> <li><a href="#">Entertainment</a></li> <li><a href="#">Technology</a></li> <li><a href="#">Sports</a></li> </ul></nav>

Page 21: Bem methodology

WRITING BLOCKS<nav class="nav-menu"> <ul class="nav-menu--items"> <li class="nav-menu--item"><a href="#">Breaking</a></li> <li class="nav-menu--item"><a href="#">World</a></li> <li class="nav-menu--item"><a href="#">U.S.</a></li> <li class="nav-menu--item"><a href="#">Business</a></li> <li class="nav-menu--item"><a href="#">Politics</a></li> <li class="nav-menu--item"><a href="#">Entertainment</a></li> <li class="nav-menu--item"><a href="#">Technology</a></li> <li class="nav-menu--item"><a href="#">Sports</a></li> </ul></nav>

Page 22: Bem methodology

WRITING BLOCKS.nav-menu { display: block; margin: 0; padding: 0; width: 100%; float: right;}

.nav-menu--items { margin: 0; padding: 0;}

.nav-menu--item { float: left; list-style-type: none; margin-left: 0.5%; text-align: center; width: 12%; & > a { background: $primaryColor; color: white; display: block; font-size: .9em; line-height: 3.2; text-decoration: none; &:hover { background: $primaryColorLighter; -webkit-transform: rotate(10deg); transform: rotate(10deg);

Page 23: Bem methodology

DEFINE MODIFIERS.nav-menu--item__simple { @extend .nav-menu; display: inline; float: none; & > a { line-height: 1; text-decoration: none; } &:after { content: " | "; } &:last-child:after { content: ""; }}

Page 24: Bem methodology

BUILDING YOUR APPLICATION├── blocks│ ├── navMenu│ │ ├── navMenu.css│ │ ├── navMenuItem.css│ ├── logo│ │ └── logo.css│ ├── header│ │ └── header.css│ └── search│ │ ├── search.css│ │ └── search_autocomplete.css

Page 25: Bem methodology

DISADVANTAGESRepititive codeUglyFighting the platform?Classitis

Page 26: Bem methodology

ADVANTAGE: NAMESPACING.my-component-name__title

vs.my-component .title

Page 27: Bem methodology

ORGANIZATIONORGANIZATION

Image by (CC BY 2.0)Stewart

Page 28: Bem methodology

ADVANTAGE: PROGRAMMATIC CONTROLblock('navMenu').elem('item').click( ... );block('navMenu').elem('item').setModifier('current');

Reference: BEM

Page 29: Bem methodology

ADVANTAGE: SHARED UI LANGUAGEThere are only two hard things in Computer

Science: cache invalidation and naming things.

Page 30: Bem methodology

PREPROCESSORS: LESS.block_name { &__element { color: #f00; &--modifier { font-weight: bold; } }}

Produces.block_name__element { color: #f00;}.block_name__element--modifier { font-weight: bold;}

Page 31: Bem methodology

PREPROCESSORS: SASS$b: ".block_name";

#{$b}__element { color: #f00;}

#{$b}__element--modifier { font-weight: bold;}

Produces.block_name__element { color: #f00;}.block_name__element--modifier { font-weight: bold;}

Page 32: Bem methodology

PREPROCESSORS: STYLUS.block_name &__element color: #f00 &--modifier font-weight: bold

Produces.block_name__element { color: #f00;}.block_name__element--modifier { font-weight: bold;}

Page 33: Bem methodology

TOOLS AND FRAMEWORKS: BEMHTML{ block: 'navigation', content: [ { elem: 'item', content: 'News' } ]}

Page 34: Bem methodology

TOOLS AND FRAMEWORKS: CSSO.primary-navigation { font-size: 12px; color: red; font-weight: bold;}

.secondary-navigation { color: red; font-weight: bold;}

To....primary-navigation{ font-size:12px}.primary-navigation, .secondary-navigation{ color:red; font-weight:bold}

Page 35: Bem methodology

TOOLS AND FRAMEWORKS: EMMETRather than writing

ul.primary-navigation>li.primary-navigation__item*5

Instead write:ul.primary-navigation>li.-item*5|bem

Results in:

<ul class="primary-navigation"> <li class="primary-navigation__item"></li> <li class="primary-navigation__item"></li> <li class="primary-navigation__item"></li> <li class="primary-navigation__item"></li> <li class="primary-navigation__item"></li></ul>

Page 36: Bem methodology

TOOLS AND FRAMEWORKS: INUIT.CSSExample:

.pagination { text-align:center; letter-spacing:-0.31em; word-spacing:-0.43em;}[...].pagination__first a:before { content:"\00AB" "\00A0";}.pagination__last a:after { content:"\00A0" "\00BB";}

Page 37: Bem methodology

THE FUTURE (?)mm/dd/yyyy

Image by (CC BY 2.0)Sam Howzit


Recommended