Introduction​

What is BEM?

BEM stands for Block Element Modifier

  • BEM is an CSS naming convention/ methodology
  • BEM is an helper for you CSS classes
  • BEM is a way of structure your CSS classes
[block]__[element]--[modifier]

Why use BEM?

BEM stands for Block Element Modifier

  • Promotes reuse of components
  • Easy to see what depends on each other
  • Naming convention can be used
    between development and design teams
  • Everything is a class, nothing is nested
  • Relatively easy to learn

Human VS Browser

Human

nav ul li a

Write CSS selectors like

Browsers

a li ul nav

Read CSS selectors like

Keep your selectors low in specificity

High specificity

Low specificity

nav ul li a
a

BEM

Block Element Modifier

BEM

Block

Block components are removable in one piece and are for a specific purpose or use.

Outer most part of your component
Standalone entity that is meaningful on its own
 

.button
<button class="button">
    Click me
</button>

BEM

Block - namingconvention

Names may consist of Latin letters, digits, dashes and underscores.

//HTML
<header class="block"></header>

//CSS
.block {
  .....
}

BEM

Element

Element that depends upon the block (no standalone meaning).

Separated from the block with "__".

.button__icon {
    font-size: 1em;
}
<button class="button">
    Click me <span class="button__icon"></span>
</button>

BEM

Modifier

The modifier changes the style of a block or element. Separated from the block with "--"

.button {
    border: 1px dotted gold;
}
.button__icon {
    font-size: 1em;
}
.button__icon--small {
    font-size: 0.5em
}
<button class="button">
    <i class="button__icon button__icon--small"></i>
</button>

Why use BEM?

Why use BEM?​

  • Gives structure
  • Smaller selectors
  • Non-developers can read the code and tell where it is about!
  • A class is most of the time not depended on the parent element or class.
  • Helps to write self-defining context class selectors.

non-BEM VS BEM

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav ul ul  {
  padding-left: 1em;
}
.nav ul li {
  float: left;
}
.nav ul li a {
  font-weight: 600;
  color: #000000;
  background: #ccc;
  display: inline-block;
  padding: 0.5em;
}
.nav ul li ul li a {
  background: #000000;
  color: #cccccc;
}
.list--reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
.navigation__sub-list  {
  padding-left: 1em;
}
.navigation__item {
  float: left;
}
.navigation__link {
  font-weight: 600;
  color: #000000;
  background: #ccc;
  display: inline-block;
  padding: 0.5em;
}
.navigation__sub-list .navigation__link {
  background: #000000;
  color: #cccccc;
}

Use BEM with Sass

Use BEM with Sass

// Block
.navigation {

    // Element
    &__item {
        border-top: 1px solid #ccc;
    }
    
    // Modifier
    &--sub {
        margin-left: 15px;
        .navigation__link {
            font-style: italic;
        }
    }
}
.navigation__item {
    border-top: 1px solid #ccc;
}
.navigation--sub {
    margin-left: 15px;
}
.navigation--sub .navigation__link {
    font-style: italic;
}

Don'ts

  • Nest to deep
  • Use described class named
    <span class="blue__text"></span>
  • Use double element/ modifier naming
    (block__list__item button--secondary--special)
  • Use modifier alone
    <i class="button--secondary"></i>
  • Use element/ ID naming in CSS
    #myForm {...} a {...}
  • Use multiple classname selecters
    .button.active {...}
  • Use !important
     

Do's

  • Use basic naming
    <span class="highlight__text"></span>
  • Keep when possible block/ element naming in tact
    .home / .home-title / .home-text
  • You can use blocks in elements
  • You can use modifier on a block OR element
    .home--small .home__text--small
  • There is not one simple solution, you can vary!

Practice!

  • Assignment time

BEM

By CodePamoja

Made with Slides.com

BEM

  • 129

More from CodePamoja