BEM (block__element--modifier)

In this example below you will see how to do a BEM (block__element--modifier) with some HTML / CSS and Javascript

This awesome code was written by MightyJoeW, you can see more from this user in the personal repository.
You can find the original code on
Copyright MightyJoeW ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>BEM (block__element--modifier)</title>
    <link rel="stylesheet" href="">

      <link rel="stylesheet" href="css/style.css">



  <div class="wrapper">
  <nav class="nav--wrapper">
    <div class="nav__item">Logo</div>
    <div class="nav__item nav__item--right">About</div>
    <div class="nav__item">Careers</div>
    <div class="nav__item">Logout</div>
  <section class="signup--wrapper">
      <p class="signup__info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, quae quasi iusto sit autem, similique omnis adipisci reprehenderit mollitia sapiente in dolorum, iste et quis quod quia. Consectetur, quo nihil.
      <button class="button">Button</button>
      <button class="button button--success">Sucess Button</button>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati deserunt nihil sunt impedit voluptatibus atque commodi placeat eius est, praesentium sint laboriosam ut vitae harum nam consequatur at sed fugiat!



/*Downloaded from */
* {
  box-sizing: border-box;

/* BLOCKS *********************************************************/
.wrapper {
  height: 100vh;
  display: grid;
  grid-gap: 1em;
  grid-template-rows: 1fr repeat(2, 3fr) 2fr;

.nav--wrapper {
  background: black;
  color: white;
  display: flex;
  align-items: center;

.signup-wrapper {
  display: grid;
  grid-grap: 1em;
  grid-template-columns: repeat(2, 1fr);

.button {
  border-radius: 3px;
  padding: 7px 12px;
  border: 1px solid #D5D5D5;
  background-image: linear-gradient(#EEE, #DDD);
  font: 700 13/18px Helvetica, arial;
  cursor: pointer;

footer {
  background: lightgrey;

/* ELEMENTS *********************************************************/
.nav__item {
  margin: 0 1em;

.signup__info {
  grid-colum: 1 / -1;

/* MODIFIERS *********************************************************/
.nav__item--right {
  margin-left: auto;

.button--success {
  color: #fff;
  background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;