BEM naming contradictions about reusability

[dangelion]

Hi
I read your guideline on BEM (and others) but I still find some contradictions about the reusability. Please answer!

ONE: project-specific or global name?
The naming conventions require naming for project-specific objects or for global objects (reusable on different projects)?

Code speaks: this (project-specific object "User")...

<div class="container users">
  <div class="user user--banned"> <!-- Block with modifier -->
    <h2 class="user__nickname">John Doe</h2>
    <p class="user__bio">Lorem ipsum lorem ipsum.</p>
  </div>
  <div class="user">
    <h2 class="user__nickname">John Doe</h2>
    <p class="user__bio">Lorem ipsum lorem ipsum.</p>
  </div>
  <div class="user">
    <h2 class="user__nickname">John Doe</h2>
    <p class="user__bio">Lorem ipsum lorem ipsum.</p>
  </div>
</div>

... or this (that is a global object "Card" that can be used for both "User" and, for ie, "Article")?

<div class="container users">
  <div class="card card--red"> <!-- Block with modifier -->
    <h2 class="card__heading">John Doe</h2>
    <p class="card__text">Lorem ipsum lorem ipsum.</p>
  </div>
  <div class="card">
    <h2 class="card__heading">John Doe</h2>
    <p class="card__text">Lorem ipsum lorem ipsum.</p>
  </div>
  <div class="card">
    <h2 class="card__heading">John Doe</h2>
    <p class="card__text">Lorem ipsum lorem ipsum.</p>
  </div>
</div>

If the right way is the first, I will have to write classes for different blocks ("user" or "article") with same properties (since now they're are visually the same)? It seems redundant and not reusable over multiple projects.

TWO: layout related properties
I have to put layout-grid related styles in the same class as well with theme styles? Or I have to separate them?

This:

    .user{
        // Grid-layout styles
        float:left;
        width:33.3333%;
        // Theme etc styles
        background: #EEE;
        border: 1px solid green;
    }

Or this?

    .card{
        // Theme etc styles
        background: #EEE;
        border: 1px solid green;
    }
    .col-1-3{
        // Grid-layout class to assign to each .card block
        float:left;
        width:33.3333%;
    }

Also, check this question http://stackoverflow.com/questions/36687676/bem-naming-separate-layout-styles-from-theme-styles