BEM CSS Workshop

git.io/css-old-school

Little frontend exersise

• Make another menu in the sidebar
• This second menu should have different color scheme
• Place a button in the active menu item
• Button in the active menu item should be smaller
• Use smaller buttons in the main column too

What makes CSS hard?

• Vertical centering
• Equal height columns
• Browser inconsistencies
• Unobvious tricks

What really makes CSS hard?

• Scoping
• Specificity conflicts
• Non-deterministic matches
• Dependency management
• Removing unused code

Theory

.BLOCK{__ELEMENT[--MODIFIER]}

Just a button

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

Button button Span button Link button

Code: bit.ly/b-e-m

Selected button (modifier)

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

Button Selected button

$element.addClass('button--selected')

Theme

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

Button Brand button Selected brand 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>

Button Night button Selected night button

State as a modifier

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

Button Doing smth button

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

Combine modifiers

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

Doing smth brand button

Doing smth night button

Element

<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>

No need in menu__item__link!

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>

git.io/css-bem-way

Let’s try again

• Make another menu in the sidebar
• This second menu should have different color scheme
• Place a button in the active menu item
• Button in the active menu item should be smaller
• Use smaller buttons in the main column too

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

git.io/jq5p

BEM CSS Workshop

varya.me/bem-css-workshop