BEM CSS Workshop

Varya Stepanova, SC5 Online

BEM CSS Workshop

Brought to you by Varya Stepanova and generated by Jekyller

Little frontend exersise

What makes CSS hard?

What really makes CSS hard?

Where CSS is hard?

This is not hard in CSS This is!
#sidebar ul li a {  color: red;  display: block;  padding: 1em;}
#sidebar ul li a {  color: red;  display: block;  padding: 1em;}

How do we architect encapsulated components?



Just a button

<button class="button">Button button</button><span class="button">Span button</span><a class="button" href="#">Link button</a>

Span button Link button


Selected button (modifier)

<button class="button">Button</button><button class="button button--selected">  Selected button</button>



<button class="button">Button</button><button class="button button--brand">Brand button</button><button class="button button--brand button--selected">  Selected brand button</button>

Another theme

<button class="button">Button</button><button class="button button--night">Night button</button><button class="button button--night button--selected">  Selected night button</button>

State as a modifier

<button class="button button--process">  Doing smth button</button>

$element.toggleClass('button--process')  // Sugar: $element.toggleMod('process')

Combine modifiers

<button class="button button--brand button--process">    Doing smth brand button</button>


<div class="input">    <input class="input__field">    <span class="input__keyboard"></span></div>

Blocks of elements

<ul class="menu">    <li class="menu__item">Item 1</li>    <li class="menu__item">Item 2</li>    <li class="menu__item">Item 3</li></ul>

Nested elements

<ul class="menu">    <li class="menu__item">        <a class="menu__link">Item 1</a>    </li>    ...</ul>

Modified elements

<ul class="menu">    <li class="menu__item">Item 1</li>    <li class="menu__item menu__item--current">Item 2</li>    <li class="menu__item">Item 3</li></ul>

Let’s try again

BEM in a nutshell

Miksi? Siksi!

SASS syntax (or LESS)

.block  prop: val    &--mod    prop: val    &__elem    prop: val      &--mod      prop: val
.block {  prop: val} .block--mod {  prop: val} .block__elem {  prop: val} .block__elem--mod {  prop: val}

MindBEMding :-)

$text__family-sans: "Proxima Nova", Helvetica, sans-serif;$text__size--beta: 30;$text__line--beta: 36; $text__colour--base: $color__neutral--dark;$text__colour--alpha: $color__primary;$text__colour--beta: $color__primary;

File structure

components/  header.sass  footer.sass  menu.sass  ...

Multilingual structure

components/  header/    header.ctrl.js    header.dir.js    header.html    header.sass  footer/  ...

Multilingual structure

logo/  logo.sass  logo.svgauth-form/  auth-form.sass  auth-form__background.gif  auth-form.ctrl.js

Multilingual structure

Real life example

One library for many sites

One site, many libraries

BEM CSS Workshop

Fork me on Github