BEM class names for smart home monitoring page

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;







up vote
0
down vote

favorite












I'm new to BEM (Block Element Modifier) and I believe I understand the concept. But to be sure, can someone look at the code and see if I should change something?



This is my result, what I created:





So I divided my HTML into header, sections and items. Which I believe are blocks. In these blocks I have some new elements which I gave named using double underscores, example: item__positive. And I have two hidden elements which I have a modifier class item--hidden. Is this ok?



Here is the HTML:



<!DOCTYPE html>
<html lang="en-us">

<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>SecondTask</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" media="screen" href="css/style.css" />
</head>

<body>

 <main>
 <header class="header">
 <div class="header__title">Smart Home Monitoring</div>
 <time class="header__time">Friday 2/23/2017</time>
 </header>
 <section>
 <div class="item">
 <h1> Temperature </h1>
 <br> <h2>75&deg;</h2> 
 <br> <div class="item__positive"> + </div> &nbsp; &nbsp; &nbsp; &nbsp; <div class="item__positive"> - </div>
 </div>
 <div class="item">
 <h1> Electricity </h1>
 <br> <h2>84</h2>
 <br> <div class="item__valute"> kWh </div>
 </div>
 <div class="item">
 <h1> WiFi </h1>
 <br> <h2>21</h2>
 <br> <div class="item__valute"> Mb/s </div>
 </div>
 <div class="item">
 <h1>Security </h1>
 <br> <h2><i class="fa fa-unlock-alt" aria-hidden="true"></i></h2>
 <br> <div class="item__valute"> Unarmed </div> 
 </div>

 <div class="item item--hidden"><i class="fa fa-th downicon" aria-hidden="true"></i></div>
 <div class="item item--hidden"><i class="fa fa-cog downicon" aria-hidden="true"></i></div>
 </section>

 <section>

 <div class="item item-five-main">
 <div class="item-five"><i class="fa fa-th downicon" aria-hidden="true"></i></div>
 <div class="item-five"><i class="fa fa-cog downicon" aria-hidden="true"></i></div>
 </div>

 <div class="item item-six-main">
 <div class="item-six">
 Monday <br>
 <img src="img/1.png" alt="Monday weather" height="62" width="62"> <br>
 <div class="item__valute">52&deg;</div>
 </div>
 <div class="item-six">
 Tuesday <br>
 <img src="img/5.png" alt="Tuesday weather" height="62" width="62"> <br>
 <div class="item__valute">58&deg;</div>
 </div>
 <div class="item-six">
 Wednesday <br>
 <img src="img/3.png" alt="Wednesday weather" height="62" width="62"> <br>
 <div class="item__valute">63&deg;</div>
 </div>
 <div class="item-six">
 Thursday <br>
 <img src="img/4.png" alt="Thursday weather" height="62" width="62"> <br>
 <div class="item__valute">59&deg;</div>
 </div>
 <div class="item-six">
 Friday <br>
 <img src="img/5.png" alt="Friday weather" height="62" width="62"> <br>
 <div class="item__valute">50&deg;</div>
 </div>
 <div class="item-six">
 Saturday <br>
 <img src="img/6.png" alt="Saturday weather" height="62" width="62"> <br>
 <div class="item__valute">47&deg;</div>
 </div>
 <div class="item-six">
 Sunday <br>
 <img src="img/7.png" alt="Monday weather" height="62" width="62"> <br>
 <div class="item__valute">49&deg;</div>
 </div>
 </div>
 </section>
 </main>



 <script src="https://use.fontawesome.com/de6202bdee.js"></script>
</body>

</html>


Here is the SCSS:



$navcolor: #07f;
$white: #fff;
$maincolor: #e5f0f8;
$hoverover: #e5e5e5;

body 
 font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 font-weight: bold;


main 
 background-color: $maincolor;
 height: 100%;
 margin: 0 auto;
 max-width: 1000px;


section 
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;


.header 
 background-color: $navcolor;
 color: $white;
 padding: 20px;

 &__title 
 display: inline;
 text-transform: uppercase;
 

 &__time 
 float: right;
 


h2 
 font-size: 50px;
 margin: 0;


.item 
 background-color: $white;
 margin: 10px;
 text-align: center;
 width: 230px;

 &__positive display: inline; 

 &__valute margin-bottom: 20px; 

 &--hidden display: none; 

 &-five-main 
 background-color: transparent;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 

 &-five 
 background-color: $white;
 flex: 1;
 font-size: 40px;
 padding: 10px;
 padding-top: 25px;

 &:nth-child(2) 
 margin-top: 10px;
 

 

 &-six-main 
 display: flex;
 flex-grow: 5;
 flex-wrap: wrap;
 justify-content: space-between;
 

 &-six 
 padding-left: 10px;
 padding-right: 10px;
 padding-top: 20px;

 img 
 padding-bottom: 20px;
 padding-top: 20px;
 

 &:hover 
 background-color: $hoverover;
 

 


@media(max-width: 1015px) 
 body 
 background-color: rgb(182, 253, 255);
 

 .item 
 &--hidden 
 display: block;
 font-size: 40px;
 padding-top: 80px;
 

 &-five-main display: none; 
 



@media(max-width: 765px) 
 body 
 background-color: rgb(205, 255, 182);
 

 .item 
 &--hidden 
 display: block;
 font-size: 40px;
 padding-bottom: 70px;
 padding-top: 70px;
 
 



@media(max-width: 515px) 
 body 
 background-color: rgb(255, 87, 227);
 

 .item 
 margin-left: 15px;
 width: 390px;
 

 .header 
 padding: 30px;

 &__title 
 float: left;
 font-size: 12px;
 

 &__time 
 float: right;
 font-size: 12px;





html css sass bem




share|improve this question



























    up vote
    0
    down vote

    favorite












    I'm new to BEM (Block Element Modifier) and I believe I understand the concept. But to be sure, can someone look at the code and see if I should change something?



    This is my result, what I created:





    So I divided my HTML into header, sections and items. Which I believe are blocks. In these blocks I have some new elements which I gave named using double underscores, example: item__positive. And I have two hidden elements which I have a modifier class item--hidden. Is this ok?



    Here is the HTML:



    <!DOCTYPE html>
    <html lang="en-us">

    <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>SecondTask</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" media="screen" href="css/style.css" />
    </head>

    <body>

     <main>
     <header class="header">
     <div class="header__title">Smart Home Monitoring</div>
     <time class="header__time">Friday 2/23/2017</time>
     </header>
     <section>
     <div class="item">
     <h1> Temperature </h1>
     <br> <h2>75&deg;</h2> 
     <br> <div class="item__positive"> + </div> &nbsp; &nbsp; &nbsp; &nbsp; <div class="item__positive"> - </div>
     </div>
     <div class="item">
     <h1> Electricity </h1>
     <br> <h2>84</h2>
     <br> <div class="item__valute"> kWh </div>
     </div>
     <div class="item">
     <h1> WiFi </h1>
     <br> <h2>21</h2>
     <br> <div class="item__valute"> Mb/s </div>
     </div>
     <div class="item">
     <h1>Security </h1>
     <br> <h2><i class="fa fa-unlock-alt" aria-hidden="true"></i></h2>
     <br> <div class="item__valute"> Unarmed </div> 
     </div>

     <div class="item item--hidden"><i class="fa fa-th downicon" aria-hidden="true"></i></div>
     <div class="item item--hidden"><i class="fa fa-cog downicon" aria-hidden="true"></i></div>
     </section>

     <section>

     <div class="item item-five-main">
     <div class="item-five"><i class="fa fa-th downicon" aria-hidden="true"></i></div>
     <div class="item-five"><i class="fa fa-cog downicon" aria-hidden="true"></i></div>
     </div>

     <div class="item item-six-main">
     <div class="item-six">
     Monday <br>
     <img src="img/1.png" alt="Monday weather" height="62" width="62"> <br>
     <div class="item__valute">52&deg;</div>
     </div>
     <div class="item-six">
     Tuesday <br>
     <img src="img/5.png" alt="Tuesday weather" height="62" width="62"> <br>
     <div class="item__valute">58&deg;</div>
     </div>
     <div class="item-six">
     Wednesday <br>
     <img src="img/3.png" alt="Wednesday weather" height="62" width="62"> <br>
     <div class="item__valute">63&deg;</div>
     </div>
     <div class="item-six">
     Thursday <br>
     <img src="img/4.png" alt="Thursday weather" height="62" width="62"> <br>
     <div class="item__valute">59&deg;</div>
     </div>
     <div class="item-six">
     Friday <br>
     <img src="img/5.png" alt="Friday weather" height="62" width="62"> <br>
     <div class="item__valute">50&deg;</div>
     </div>
     <div class="item-six">
     Saturday <br>
     <img src="img/6.png" alt="Saturday weather" height="62" width="62"> <br>
     <div class="item__valute">47&deg;</div>
     </div>
     <div class="item-six">
     Sunday <br>
     <img src="img/7.png" alt="Monday weather" height="62" width="62"> <br>
     <div class="item__valute">49&deg;</div>
     </div>
     </div>
     </section>
     </main>



     <script src="https://use.fontawesome.com/de6202bdee.js"></script>
    </body>

    </html>


    Here is the SCSS:



    $navcolor: #07f;
    $white: #fff;
    $maincolor: #e5f0f8;
    $hoverover: #e5e5e5;

    body 
     font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
     font-weight: bold;


    main 
     background-color: $maincolor;
     height: 100%;
     margin: 0 auto;
     max-width: 1000px;


    section 
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;


    .header 
     background-color: $navcolor;
     color: $white;
     padding: 20px;

     &__title 
     display: inline;
     text-transform: uppercase;
     

     &__time 
     float: right;
     


    h2 
     font-size: 50px;
     margin: 0;


    .item 
     background-color: $white;
     margin: 10px;
     text-align: center;
     width: 230px;

     &__positive display: inline; 

     &__valute margin-bottom: 20px; 

     &--hidden display: none; 

     &-five-main 
     background-color: transparent;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     

     &-five 
     background-color: $white;
     flex: 1;
     font-size: 40px;
     padding: 10px;
     padding-top: 25px;

     &:nth-child(2) 
     margin-top: 10px;
     

     

     &-six-main 
     display: flex;
     flex-grow: 5;
     flex-wrap: wrap;
     justify-content: space-between;
     

     &-six 
     padding-left: 10px;
     padding-right: 10px;
     padding-top: 20px;

     img 
     padding-bottom: 20px;
     padding-top: 20px;
     

     &:hover 
     background-color: $hoverover;
     

     


    @media(max-width: 1015px) 
     body 
     background-color: rgb(182, 253, 255);
     

     .item 
     &--hidden 
     display: block;
     font-size: 40px;
     padding-top: 80px;
     

     &-five-main display: none; 
     



    @media(max-width: 765px) 
     body 
     background-color: rgb(205, 255, 182);
     

     .item 
     &--hidden 
     display: block;
     font-size: 40px;
     padding-bottom: 70px;
     padding-top: 70px;
     
     



    @media(max-width: 515px) 
     body 
     background-color: rgb(255, 87, 227);
     

     .item 
     margin-left: 15px;
     width: 390px;
     

     .header 
     padding: 30px;

     &__title 
     float: left;
     font-size: 12px;
     

     &__time 
     float: right;
     font-size: 12px;





    html css sass bem




    share|improve this question























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I'm new to BEM (Block Element Modifier) and I believe I understand the concept. But to be sure, can someone look at the code and see if I should change something?



      This is my result, what I created:





      So I divided my HTML into header, sections and items. Which I believe are blocks. In these blocks I have some new elements which I gave named using double underscores, example: item__positive. And I have two hidden elements which I have a modifier class item--hidden. Is this ok?



      Here is the HTML:



      <!DOCTYPE html>
      <html lang="en-us">

      <head>
       <meta charset="utf-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title>SecondTask</title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" media="screen" href="css/style.css" />
      </head>

      <body>

       <main>
       <header class="header">
       <div class="header__title">Smart Home Monitoring</div>
       <time class="header__time">Friday 2/23/2017</time>
       </header>
       <section>
       <div class="item">
       <h1> Temperature </h1>
       <br> <h2>75&deg;</h2> 
       <br> <div class="item__positive"> + </div> &nbsp; &nbsp; &nbsp; &nbsp; <div class="item__positive"> - </div>
       </div>
       <div class="item">
       <h1> Electricity </h1>
       <br> <h2>84</h2>
       <br> <div class="item__valute"> kWh </div>
       </div>
       <div class="item">
       <h1> WiFi </h1>
       <br> <h2>21</h2>
       <br> <div class="item__valute"> Mb/s </div>
       </div>
       <div class="item">
       <h1>Security </h1>
       <br> <h2><i class="fa fa-unlock-alt" aria-hidden="true"></i></h2>
       <br> <div class="item__valute"> Unarmed </div> 
       </div>

       <div class="item item--hidden"><i class="fa fa-th downicon" aria-hidden="true"></i></div>
       <div class="item item--hidden"><i class="fa fa-cog downicon" aria-hidden="true"></i></div>
       </section>

       <section>

       <div class="item item-five-main">
       <div class="item-five"><i class="fa fa-th downicon" aria-hidden="true"></i></div>
       <div class="item-five"><i class="fa fa-cog downicon" aria-hidden="true"></i></div>
       </div>

       <div class="item item-six-main">
       <div class="item-six">
       Monday <br>
       <img src="img/1.png" alt="Monday weather" height="62" width="62"> <br>
       <div class="item__valute">52&deg;</div>
       </div>
       <div class="item-six">
       Tuesday <br>
       <img src="img/5.png" alt="Tuesday weather" height="62" width="62"> <br>
       <div class="item__valute">58&deg;</div>
       </div>
       <div class="item-six">
       Wednesday <br>
       <img src="img/3.png" alt="Wednesday weather" height="62" width="62"> <br>
       <div class="item__valute">63&deg;</div>
       </div>
       <div class="item-six">
       Thursday <br>
       <img src="img/4.png" alt="Thursday weather" height="62" width="62"> <br>
       <div class="item__valute">59&deg;</div>
       </div>
       <div class="item-six">
       Friday <br>
       <img src="img/5.png" alt="Friday weather" height="62" width="62"> <br>
       <div class="item__valute">50&deg;</div>
       </div>
       <div class="item-six">
       Saturday <br>
       <img src="img/6.png" alt="Saturday weather" height="62" width="62"> <br>
       <div class="item__valute">47&deg;</div>
       </div>
       <div class="item-six">
       Sunday <br>
       <img src="img/7.png" alt="Monday weather" height="62" width="62"> <br>
       <div class="item__valute">49&deg;</div>
       </div>
       </div>
       </section>
       </main>



       <script src="https://use.fontawesome.com/de6202bdee.js"></script>
      </body>

      </html>


      Here is the SCSS:



      $navcolor: #07f;
      $white: #fff;
      $maincolor: #e5f0f8;
      $hoverover: #e5e5e5;

      body 
       font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
       font-weight: bold;


      main 
       background-color: $maincolor;
       height: 100%;
       margin: 0 auto;
       max-width: 1000px;


      section 
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;


      .header 
       background-color: $navcolor;
       color: $white;
       padding: 20px;

       &__title 
       display: inline;
       text-transform: uppercase;
       

       &__time 
       float: right;
       


      h2 
       font-size: 50px;
       margin: 0;


      .item 
       background-color: $white;
       margin: 10px;
       text-align: center;
       width: 230px;

       &__positive display: inline; 

       &__valute margin-bottom: 20px; 

       &--hidden display: none; 

       &-five-main 
       background-color: transparent;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       

       &-five 
       background-color: $white;
       flex: 1;
       font-size: 40px;
       padding: 10px;
       padding-top: 25px;

       &:nth-child(2) 
       margin-top: 10px;
       

       

       &-six-main 
       display: flex;
       flex-grow: 5;
       flex-wrap: wrap;
       justify-content: space-between;
       

       &-six 
       padding-left: 10px;
       padding-right: 10px;
       padding-top: 20px;

       img 
       padding-bottom: 20px;
       padding-top: 20px;
       

       &:hover 
       background-color: $hoverover;
       

       


      @media(max-width: 1015px) 
       body 
       background-color: rgb(182, 253, 255);
       

       .item 
       &--hidden 
       display: block;
       font-size: 40px;
       padding-top: 80px;
       

       &-five-main display: none; 
       



      @media(max-width: 765px) 
       body 
       background-color: rgb(205, 255, 182);
       

       .item 
       &--hidden 
       display: block;
       font-size: 40px;
       padding-bottom: 70px;
       padding-top: 70px;
       
       



      @media(max-width: 515px) 
       body 
       background-color: rgb(255, 87, 227);
       

       .item 
       margin-left: 15px;
       width: 390px;
       

       .header 
       padding: 30px;

       &__title 
       float: left;
       font-size: 12px;
       

       &__time 
       float: right;
       font-size: 12px;





      html css sass bem




      share|improve this question













      I'm new to BEM (Block Element Modifier) and I believe I understand the concept. But to be sure, can someone look at the code and see if I should change something?



      This is my result, what I created:





      So I divided my HTML into header, sections and items. Which I believe are blocks. In these blocks I have some new elements which I gave named using double underscores, example: item__positive. And I have two hidden elements which I have a modifier class item--hidden. Is this ok?



      Here is the HTML:



      <!DOCTYPE html>
      <html lang="en-us">

      <head>
       <meta charset="utf-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title>SecondTask</title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" media="screen" href="css/style.css" />
      </head>

      <body>

       <main>
       <header class="header">
       <div class="header__title">Smart Home Monitoring</div>
       <time class="header__time">Friday 2/23/2017</time>
       </header>
       <section>
       <div class="item">
       <h1> Temperature </h1>
       <br> <h2>75&deg;</h2> 
       <br> <div class="item__positive"> + </div> &nbsp; &nbsp; &nbsp; &nbsp; <div class="item__positive"> - </div>
       </div>
       <div class="item">
       <h1> Electricity </h1>
       <br> <h2>84</h2>
       <br> <div class="item__valute"> kWh </div>
       </div>
       <div class="item">
       <h1> WiFi </h1>
       <br> <h2>21</h2>
       <br> <div class="item__valute"> Mb/s </div>
       </div>
       <div class="item">
       <h1>Security </h1>
       <br> <h2><i class="fa fa-unlock-alt" aria-hidden="true"></i></h2>
       <br> <div class="item__valute"> Unarmed </div> 
       </div>

       <div class="item item--hidden"><i class="fa fa-th downicon" aria-hidden="true"></i></div>
       <div class="item item--hidden"><i class="fa fa-cog downicon" aria-hidden="true"></i></div>
       </section>

       <section>

       <div class="item item-five-main">
       <div class="item-five"><i class="fa fa-th downicon" aria-hidden="true"></i></div>
       <div class="item-five"><i class="fa fa-cog downicon" aria-hidden="true"></i></div>
       </div>

       <div class="item item-six-main">
       <div class="item-six">
       Monday <br>
       <img src="img/1.png" alt="Monday weather" height="62" width="62"> <br>
       <div class="item__valute">52&deg;</div>
       </div>
       <div class="item-six">
       Tuesday <br>
       <img src="img/5.png" alt="Tuesday weather" height="62" width="62"> <br>
       <div class="item__valute">58&deg;</div>
       </div>
       <div class="item-six">
       Wednesday <br>
       <img src="img/3.png" alt="Wednesday weather" height="62" width="62"> <br>
       <div class="item__valute">63&deg;</div>
       </div>
       <div class="item-six">
       Thursday <br>
       <img src="img/4.png" alt="Thursday weather" height="62" width="62"> <br>
       <div class="item__valute">59&deg;</div>
       </div>
       <div class="item-six">
       Friday <br>
       <img src="img/5.png" alt="Friday weather" height="62" width="62"> <br>
       <div class="item__valute">50&deg;</div>
       </div>
       <div class="item-six">
       Saturday <br>
       <img src="img/6.png" alt="Saturday weather" height="62" width="62"> <br>
       <div class="item__valute">47&deg;</div>
       </div>
       <div class="item-six">
       Sunday <br>
       <img src="img/7.png" alt="Monday weather" height="62" width="62"> <br>
       <div class="item__valute">49&deg;</div>
       </div>
       </div>
       </section>
       </main>



       <script src="https://use.fontawesome.com/de6202bdee.js"></script>
      </body>

      </html>


      Here is the SCSS:



      $navcolor: #07f;
      $white: #fff;
      $maincolor: #e5f0f8;
      $hoverover: #e5e5e5;

      body 
       font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
       font-weight: bold;


      main 
       background-color: $maincolor;
       height: 100%;
       margin: 0 auto;
       max-width: 1000px;


      section 
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;


      .header 
       background-color: $navcolor;
       color: $white;
       padding: 20px;

       &__title 
       display: inline;
       text-transform: uppercase;
       

       &__time 
       float: right;
       


      h2 
       font-size: 50px;
       margin: 0;


      .item 
       background-color: $white;
       margin: 10px;
       text-align: center;
       width: 230px;

       &__positive display: inline; 

       &__valute margin-bottom: 20px; 

       &--hidden display: none; 

       &-five-main 
       background-color: transparent;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       

       &-five 
       background-color: $white;
       flex: 1;
       font-size: 40px;
       padding: 10px;
       padding-top: 25px;

       &:nth-child(2) 
       margin-top: 10px;
       

       

       &-six-main 
       display: flex;
       flex-grow: 5;
       flex-wrap: wrap;
       justify-content: space-between;
       

       &-six 
       padding-left: 10px;
       padding-right: 10px;
       padding-top: 20px;

       img 
       padding-bottom: 20px;
       padding-top: 20px;
       

       &:hover 
       background-color: $hoverover;
       

       


      @media(max-width: 1015px) 
       body 
       background-color: rgb(182, 253, 255);
       

       .item 
       &--hidden 
       display: block;
       font-size: 40px;
       padding-top: 80px;
       

       &-five-main display: none; 
       



      @media(max-width: 765px) 
       body 
       background-color: rgb(205, 255, 182);
       

       .item 
       &--hidden 
       display: block;
       font-size: 40px;
       padding-bottom: 70px;
       padding-top: 70px;
       
       



      @media(max-width: 515px) 
       body 
       background-color: rgb(255, 87, 227);
       

       .item 
       margin-left: 15px;
       width: 390px;
       

       .header 
       padding: 30px;

       &__title 
       float: left;
       font-size: 12px;
       

       &__time 
       float: right;
       font-size: 12px;






      html css sass bem





      share|improve this question












      share|improve this question




      share|improve this question








      edited Jan 19 at 11:49









      unor

      2,300721




      2,300721









      asked Jan 18 at 7:30









      IkePr

      11




      11

























          active

          oldest

          votes











          Your Answer




          StackExchange.ifUsing("editor", function ()
          return StackExchange.using("mathjaxEditing", function ()
          StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
          StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
          );
          );
          , "mathjax-editing");

          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "196"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: false,
          noModals: false,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );








           

          draft saved


          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f185374%2fbem-class-names-for-smart-home-monitoring-page%23new-answer', 'question_page');

          );

          Post as a guest






















          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes










           

          draft saved


          draft discarded


























           


          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f185374%2fbem-class-names-for-smart-home-monitoring-page%23new-answer', 'question_page');

          );

          Post as a guest
































































          -

          Popular posts from this blog

          Python Lists

          <!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Python Lists ❮ Previous Next ❯ Python Collections (Arrays) There are four collection data types in the Python programming language: List is a collection which is ordered and changeable. Allows duplicate members. Tuple is a collection which is ordered and unchangeable. Allows duplicate members. Set is a collection which is unordered and unindexed. No duplicate members. Dictionary is a collection which is unordered, changeable and indexed. No duplicate members. When choosing a collection type, it is useful to understand the properties of that type. Choosing the right type for a particular data set could mean retention of meaning, and, it could mean an increase in efficiency or security. List A list is a collection which is ordered and changeable. In Python lists are written with square brackets. Example Create a List: thislist = ["apple", "banana", ...
          Read more

          Aion

          Image
          Aion - 6+ , 5417 Aion - . MMORPG, World of Warcraft, World of Tanks My Lineage II . CryEngine. , . : Aion https://ru.4game.com/aion/ Aion , . , , . , , . , , , . . , , , . . : . , . , , . , , . 12 , 2 : ( ). ( ). ( ). ( ) ( ). ( ). , . , : . . , . , , . . , , . Aion, , . , . , . : . . . . , : , , , , , . , , , . : Aion https://ru.4game.com/aion/install/ : . , . , . , Aion . , . . , . , . , , . . : . . . , ( !), MMORPG Aion . , . ...
          Read more

          JavaScript Array Iteration Methods

          <!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> JavaScript Array Iteration Methods ❮ Previous Next ❯ Array iteration methods operate on every array item. Array.forEach() The forEach() method Calls a function once for each array element. Example var txt = ""; var numbers = [4, 9, 16, 25]; numbers.forEach(myFunction); function myFunction(value, index, array) {     txt = txt + item + "<br>"; } Try it Yourself » Note that the function takes 3 arguments: The item value The item index The array itself Array.forEach() is not supported in Internet Explorer 8 or earlier: Method forEach() Yes 9.0 Yes Yes Yes Array.map() The map() method creates a new array by performing a function on each array element. This example multiplies each array value by 2: Example var numbers1 = [4, 9, 16, 25]; var numbers2 = numbers1.map(myFunction); function m...
          Read more