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

Thumbnail
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 Codepen.io
Copyright MightyJoeW ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>BEM (block__element--modifier)</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

  
</head>

<body>

  <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>
  </nav>
  <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.
      </p>
      <button class="button">Button</button>
      <button class="button button--success">Sucess Button</button>
  </section>
  <section>
    <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!
    </div>
  </section>
  <footer></footer>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MightyJoeW/bem-block__element-modifier-pabLaN */
* {
  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;
}

Comments