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
Post a Comment