CODEWITHSUNDEEP
csssemanticsoocssbem
catandmouse
catandmouse

Reputation: 11809

BEM: Stand-alone block within a block

For example, I have a 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 to reside in the header but can be anywhere also. Now, if it's in the header it needs to be floated to the left and also have a border. If so, is this a correct way of doing it:

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

Or as per BEM:

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

Which of the two is better?

Upvotes: 1

Views: 333

Answers (1)

Arikon
Arikon

Reputation: 1281

First one is ok. But if you want a totally contextual independent solution I suggest you to make a container in a header for the logo with floating and border and put logo there.

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

and use it like

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

Another way should be using a mixin like this

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

with such a css

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

Upvotes: 1

Related Questions