css - BEM: Stand-alone block within a block -


for example, have stand-alone block called:

.main-company-logo {   background: url(../images/logo_company.png);   width: 88px;   display: block;   text-indent: -9999999px;   height: 60px;   }  

this block happens reside in header can anywhere also. now, if it's in header needs floated left , have border. if so, correct way of doing it:

.header-main { [properties] }   .header-main .main-company-logo {     float: left;     border: 1px solid #fff;   } 

or per bem:

.main-company-logo { [properties] }   .main-company-logo--main-header {     float: left;     border: 1px solid #fff;   } 

which of 2 better?

first 1 ok. if want totally contextual independent solution suggest make container in header logo floating , border , put logo there.

.header-main { [properties] } .header-main--logo {     float: left;     border: 1px solid #fff; } .main-company-logo { [properties] } 

and use like

<div class="header-main">     <div class="header-main--logo">         <img class="main-company-logo"/>     </div> </div> 

another way should using mixin this

<div class="header-main">     <img class="header-main--logo main-company-logo"/> </div> 

with such css

.header-main { [properties] } .header-main--logo.main-company-logo {     float: left;     border: 1px solid #fff; } .main-company-logo { [properties] } 

Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -