BEM / Less Example

In this example below you will see how to do a BEM / Less Example with some HTML / CSS and Javascript

BEM / Less Example

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


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

  <meta charset="UTF-8">
  <title>BEM / Less Example</title>
    <link rel="stylesheet" href="">

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



  <div class="news">
   <img class="news__image" src=""/>
  <div class="news__message">
    <div class="news__message-date">17.11.2016</div>
    <div class="news__message-title">Title</div>
    <div class="news__message-content">Content</div>



/*Downloaded from */
.news {
  padding-top: 63px;
.news__image {
  float: left;
  padding-right: 25px;
  width: 150px;
.news__message {
  float: left;
  height: auto;
.news__message-date {
  color: lime;
  font-family: 'Arial';
.news__message-title {
  color: blue;
  font-family: 'Papyrus';
.news__message-content {
  color: red;
  font-family: 'Courier';